/* @Author: Enterprise Development
   @URL: http://ed.com.eg/

    This file contains the styling for the actual theme, this
     is the file you need to edit to change the look of the
     theme.

     This files contents are outlined below.


     1.  Default Styles
     2.  Base Styles
     3.  Preloader
     4.  Testimonials
     5.  headers
     6.  footers
     7.  pricing tables
     8.  team members
     9.  blog 
     10. image hover effects
     11. counters 
     12. Navigation
     13. Contact Pages
     14. 404 Page
     15. comming soon 
     16. Social Share<strong></strong>
     17. Related Blogs0
     18. Pagination
     19. BreadCrumbs
     20. Comments 
     21. general styles
     
*/

    


/* Global Styles */
.overflow-hidden {
    overflow: hidden;
}
.bg-hover-transparent:hover{
    background-color: transparent !important;
    transition: all ease-in-out .4s;
}
.mt-minus-13{
    margin-top: -13px;
}
.bg-rules{
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.light-font{
    font-weight: 300;
}
.border-light{
    border: 1px solid #ECF0F1 !important;
}
.regular-font{
    font-weight: 400;
}
.semi-font{
    font-weight: 600;
}
.bold-font{ 
    font-weight: 700;
}
.z-index{
    z-index: 9;
}
.border-2{
    border-width: 2px;
    border-style: solid;
}
.bg-blue{
    background-color: #5D42E5;
}
.bg-wisteria{
    background-color: #7F1F9B;
}
.bg-dark-blue{
    background-color: #1F399B;
}
.flex-center {
    justify-content: center;
    align-items: center;
    display: flex;
}
.focus-0:focus{
    box-shadow: none !important;
}
.mb-6, .my-6 {
    margin-bottom: 4rem!important;
}
.mt-6, .my-6 {
    margin-top: 4rem!important;
}
.mt-6{
    margin-top: 4rem;
}
.mb-6{
    margin-bottom: 4rem;
}
.py-6 {
    padding: 4rem 0;
}
.p-6{
    padding: 4rem;
}
.px-6 {
    padding: 0 4rem;
}
.pt-6{
    padding-top: 4rem !important;
}
.pb-6{
    padding-bottom: 4rem;
}
.pr-6{
    padding-right: 4rem;
}
.pl-6{
    padding-left: 4rem;
}
.px-7 {
    padding: 0 5rem;
}
.py-7 {
    padding: 5rem ;
}
.pl-7 {
    padding-left: 5rem;
}
.pr-7 {
    padding-right:  5rem;
}
.pt-7 {
    padding-top: 5rem;
}
.pb-7 {
    padding-bottom:5rem;
}
h1,h2,h3,h4,h5,h6,p{
    margin: 0;
}
.font-11{
    font-size: 11px;
}
.font-12{
    font-size: 12px;
}
.font-13{
    font-size: 13px;
}
.font-14{
    font-size: 14px;
}
.font-15{
    font-size: 15px;
}
.font-16{
    font-size: 16px;
}
.font-17{
    font-size: 17px;
}
.font-18{
    font-size: 18px;
}
.font-19 {
    font-size: 19px;
}
.font-20{
    font-size: 20px;
}
.font-22{
    font-size: 22px;
}
.font-23{
    font-size: 23px;
}
.font-25{
    font-size: 25px;
}
.font-26{
    font-size: 26px;
}
.font-30{
    font-size: 30px;
}
.font-35{
    font-size: 35px;
}
.font-40{
    font-size: 40px;
}
.font-250{
    font-size: 250px;
}
.font-300{
    font-size: 300px;
}
.width-100{
    width: 100% !important;
}
.dots-0 .owl-dots{
    display: none;
}
.absolute-dots .owl-dots {
    position: absolute;
    bottom: 3%;
    width: 100%;
}
.nav-0 .owl-nav{
    display: none;
}
.nav-default .owl-nav{
    display: block !important;
}
.italic{
    font-style: italic;
}
.border-top-1 {
    border-top-width: 1px;
    border-top-style: solid;
}
.form-control:focus { 
    background-color: transparent;
    border-color: rgba(229, 77, 66, 1); 
    box-shadow: none;
}
.owl-carousel .owl-item img {
    width: auto;
    margin-right:  auto;
    margin-left:  auto;
    max-width: 100%;
}
.btn.focus, .btn:focus { 
    box-shadow: none;
}
.underline {
    text-decoration: underline;
}
a:hover , .btn-link:hover{
    text-decoration: none;
}
.just-center{
    justify-content: center;
}
.margin-l-none {
    margin-left: -15px;
}
.margin-r-none{
    margin-right: -15px;
}
.border-none{
    border: 0;
}
.fables-btn-rounded {
    border-radius: 30px;
}
.fables-btn-rounded span{
    z-index: 2;
    position: relative;
}
.btn-bg-hover{
    position: relative;
}
.btn-bg-hover::before{
    content: "";
    position: absolute;
    left: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: inherit;
    transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
}
.btn-bg-hover::before:hover{
    left: 0;
}

/* fables colors */
.fables-light-background-color {
    background-color: #F6F6F6; 
}
.fables-main-color-transparent {
     background-color: rgba(44,62,79,.9);
}
.fables-second-color-transparent {
     background-color: rgba(229,77,66,.8);
}
.fables-main-gradient{
    background: -moz-linear-gradient(top, rgba(44,62,79,0.2) 0%, rgba(44,62,79,0.21) 1%, rgba(44,62,79,0.77) 100%);
    background: -webkit-linear-gradient(top, rgba(44,62,79,0.2) 0%,rgba(44,62,79,0.21) 1%,rgba(44,62,79,0.77) 100%);
    background: linear-gradient(to bottom, rgba(44,62,79,0.2) 0%,rgba(44,62,79,0.21) 1%,rgba(44,62,79,0.77) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#332c3e4f', endColorstr='#c42c3e4f',GradientType=0 );
}
.fables-main-background-color ,.fables-main-before a::before , .fables-main-before a::after ,.fables-main-active.active , .fables-main-dots .owl-dot.active span ,.fables-main-hover-background-color:hover{
    background-color: #2C3E4F !important;
}
.fables-main-text-color{
    color: #2C3E4F ;
}
.fables-main-hover-color:hover  {
    color: #2C3E4F ;
}
.fables-main-text-color-link a {
    color: #2C3E4F !important;
}
.fables-main-border-color  {
    border-color: #2C3E4F !important;
}
 
.fables-second-background-color ,.fables-second-before::before , .fables-second-before::after ,.fables-second-hover-background-color:hover ,.fables-second-active.active , .fables-second-dots .owl-dot.active span{
    background-color: #E54D42 !important;
    transition: all ease-in-out .3s;
}
 
.fables-second-hover-background-color:hover , .fables-forth-hover-backround-color:hover , .fables-main-hover-backround-color:hover{
    color: #fff;
}
.fables-second-text-color{
    color: white;
	background-color: #e12454;
	width: 100%;
	font-size: 22px;
	height: auto;
 	position: relative;
 	padding: 10px;
	
}
 .fables-second-hover-color:hover , .fables-second-hover-color-link a:hover{
    color: #E54D42  ;
}
.fables-second-border-color {
    border-color: #E54D42 !important;
}
.fables-second-hover-text-color:hover .fables-main-text-color ,.fables-second-hover-color:hover .fables-third-text-color
,.fables-second-hover-text-color:hover .fables-fifth-border-color{
    color: #E54D42 !important;
}
.fables-second-hover-text-color:hover .fables-forth-text-color{
    border-color: #E54D42
}
.fables-third-background-color , .fables-third-after:after , .fables-third-before:before{
    background-color: #DDDDDD; 
}
.fables-third-text-color{
    color: #DDDDDD;
}
.fables-third-border-color{
    border-color: #DDDDDD;
}
.fables-forth-before ,.fables-forth-after {
    position: relative;
}
.fables-forth-background-color ,.fables-forth-before a::before, .fables-forth-after::after , .fables-forth-hover-backround-color:hover{
    background-color: #5C6A77 !important;
}
.fables-forth-text-color{
    color: #5C6A77;
	text-indent:2.5rem;
	text-align:justify;

}
.fables-forth-border-color{
    border-color: #5C6A77;
}
.fables-fifth-background-color{
    background-color:#99A2AA;
}
.fables-fifth-text-color{
    color: #99A2AA;
}
.fables-fifth-border-color{
    border-color:#99A2AA;
}
.fables-light-gary-background{
    background-color: #ECF0F1;
}
.bg-white-hover:hover {
    background-color: #fff;
}

/************************* Image Hover Effects *****************************/
.image-container{ 
    overflow: hidden;
    position: relative; 
}
.image-container img{
    transition: all ease-in-out .4s;
    -o-transition: all ease-in-out .4s;
    -webkit-transition: all ease-in-out .4s;
    -moz-transition: all ease-in-out .4s;
}
.translate-effect-right img{ 
    max-width: none !important;
    width: calc(100% + 60px) !important;
    transition: opacity .35s,transform .45s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-36px,0,0);
}
.translate-effect-right:hover img {
    opacity: .6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.zoomIn-effect img{
    width: 100%;
}
.zoomIn-effect:hover img{
    transform: scale(1.3);
    -o-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
     
}
.zoomOut-effect img{
    transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
}
.zoomOut-effect:hover img{
    transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1); 
     
}
.rotateIn-effect:hover img{
    transform: rotate(8deg) scale(1.4);
    -o-transform: rotate(8deg) scale(1.4);
    -webkit-transform: rotate(8deg) scale(1.4);
    -moz-transform: rotate(8deg) scale(1.4);
     
}
.rotateOut-effect:hover img{
    transform: rotate(-8deg) scale(1.4);
    -o-transform: rotate(-8deg) scale(1.4);
    -webkit-transform: rotate(-8deg) scale(1.4);
    -moz-transform: rotate(-8deg) scale(1.4);
    
}
.shine-effect::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 9999;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.shine-effect:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}


/************************* TẢI VỀ MÁY *****************************/
.image-container {
    position: relative;
}

/* Nút tải ảnh */
.download-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FFFFFF;
    color: #000000;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.image-container:hover .download-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.download-btn:hover {
    background: #e12454; /* xanh lá nổi bật */
    color: #fff;
}

/* Modal */
.img-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    overflow: auto;
    text-align: center;
    padding: 40px 0;
}

/* Ảnh trong modal */
.zoomed-image {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    margin: auto;
    display: block;
    cursor: zoom-in;
    transition: transform 0.3s ease;
	
	 /* 🌟 Viền sáng */
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

/* Trạng thái zoom */
.zoomed-image.zoom {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    transform: scale(1); /* phóng to 1.5 lần */
    cursor: zoom-out;
	 /* Khi zoom vẫn giữ viền sáng nhưng mạnh hơn */
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
}

/* Nút đóng modal */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 54px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}




.close:hover {
    color: #e12454;
}








/*  TH�NG TIN TUY?N D?NG */



.container_1 {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr; /* Ch? 1 c?t duy nh?t */  
	font-family: 'Roboto', sans-serif;
}


.page-title {
    text-align: center;
    font-size: 27px;
    color: #e12454;
    font-weight: 700;
    margin-bottom: 40px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #e12454, #f5a623); /* Gradient m�u d? v� cam */
    -webkit-background-clip: text; /* S? d?ng gradient cho m�u ch? */
    color: transparent; /* L?y m�u gradient cho text */
    padding: 10px 0;
}


    h2 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 18px;
        color: #333;
        text-transform: uppercase;
    }

    /* LEFT COLUMN */
    .info-list-1 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 c?t b?ng nhau */
  gap: 10px 40px; /* kho?ng c�ch h�ng v� c?t � b?n c� th? di?u ch?nh */
  padding: 15px;
}

.info-list li {
  margin-bottom: 0; /* b? kho?ng c�ch li m?c d?nh n?u c?n */
  /* v?n gi? padding-left ho?c di?u ch?nh v? tr� d?u "�" n?u c?n */
}

    .info-list li::before {
        content: "�";
        position: absolute;
        left: 0;
        top: 0;
        color: #a9a9a9;
        font-size: 17px;
    }

    .info-title {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 3px;
        color: #666;
    }

   

    
    /* BENEFITS */

    .benefits {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 30px;
        margin-bottom: 30px;
        font-size: 14px;
    }

    .benefits li {
        list-style: none;
        display: flex;
        gap: 8px;
        align-items: flex-start;
        color: #333;
    }

    .benefits i {
        font-style: normal;
        margin-top: 2px;
        font-size: 14px;
    }

    /* JOB DESCRIPTION */
    .job-section h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
        margin-top: 10px;
    }

    .job-section p {
        line-height: 1.6;
        font-size: 14px;
        margin-bottom: 12px;
    }

    .job-section ul {
        margin-left: 20px;
        margin-bottom: 20px;
    }

    .job-section li {
        font-size: 14px;
        margin-bottom: 10px;
    }



.info-title:hover {
   
  color: #e12454; /* M�u m?c d?nh */
    transition: color 0.6s ease; /* Th?i gian chuy?n m�u 0.3s */
}
/* Container can gi?a */
.button-container {
    text-align: center;
}




/* Container d? can gi?a n�t */
.button-container {
    text-align: center;
}

/* Style cho n�t b?m */
.animated-btn {
    background-color: #F7285D;
    color: white;
    border: none;
    padding: 9px 36px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    animation: pulse 2s infinite;
}

/* Hi?u ?ng �nh s�ng ch?y ngang */
.animated-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(10px);
    transform: skewX(-20deg);
    animation: shine 2.5s infinite;
}

/* Hover: ph�ng to + �nh s�ng d? */
.animated-btn:hover {
    background-color: #F7285D;
    transform: scale(1.1);
    box-shadow: 0 0 20px 5px rgba(255, 75, 92, 0.7);
}

/* Khi nh?n */
.animated-btn:active {
    transform: scale(0.98);
    box-shadow: none;
}

/* Hi?u ?ng pulse */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Hi?u ?ng �nh s�ng ch?y */
@keyframes shine {
    0% { left: -100%; }
    70% { left: 120%; }
    100% { left: 120%; }
}


/* H?p thanh ti?n tr�nh */
#progressBox {
    width: 100%;
    max-width: 450px;
    height: 20px;
    background: #f1f1f1;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px auto;
    position: relative;
    display: none;
   
}

/* Thanh ch?y */
#progressBar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff5678 ,#e12454);
    transition: width 0.2s ease-out;   /* ch?y mu?t theo th?i gian th?c */
}

/* Ph?n tram */
#percentText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    display: none;
    pointer-events: none;
}

/* Th�ng b�o th�nh c�ng */
#successMessage {
    width: fit-content;
    margin: 10px auto;
    color: #e12454;
    border-radius: 6px;
    display: none;
    font-weight: bold;
    text-align: center;
}

/* Th�ng b�o l?i */
#errorMessage {
    width: fit-content;
    margin: 10px auto;
    padding: 10px 20px;
    background: #e12454;
    color: #fff;
    border-radius: 6px;
    display: none;
    font-weight: bold;
    text-align: center;
}







/* TUY?N D?NG */
/* ===== Reset chung ===== */
/* ===== RESET ===== */


/* ===== SECTION ===== */
.career-section {
    text-align: center;
    padding: 25px 20px;
}



/* ===== CONTAINER ===== */
.career-container {
    display: flex;
    justify-content: center;
    gap: 85px;
    flex-wrap: wrap;
}

/* ===== BOX ===== */
.career-box {
    text-align: center;
    transition: 0.45s ease;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1.2s ease forwards;
}

/* Delay khi xu?t hi?n */
.delay1 { animation-delay: 0.2s; }
.delay2 { animation-delay: 0.4s; }
.delay3 { animation-delay: 0.6s; }
.delay4 { animation-delay: 0.8s; }

/* fade-in m?nh m? */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ?NH TR�N ===== */
.circle-img {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 25px;
    border: 5px solid #fff;

    /* �? b�ng nhi?u t?ng (premium depth) */
    box-shadow:
        0 10px 25px rgba(0,0,0,0.25),
        0 20px 40px rgba(0,0,0,0.18),
        0 40px 60px rgba(225, 36, 84, 0.15);

    position: relative;
    transition: 0.5s ease;
}

/* ===== VI?N NEON �? M?NH M? ===== */
.career-box:hover .circle-img {
    border-color: #e12454;
    transform: scale(1.14) rotateZ(3deg);

    /* Neon d? 3 t?ng */
    box-shadow:
        0 0 20px rgba(225,36,84,0.7),
        0 0 45px rgba(225,36,84,0.5),
        0 0 70px rgba(225,36,84,0.4),
        0 30px 50px rgba(0,0,0,0.4);
}

/* ===== V�NG S�NG NEON CH?Y NHANH ===== */
.circle-img::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    padding: 5px;

    background: conic-gradient(
        from 0deg,
        #e12454 0deg,
        transparent 110deg,
        #e12454 240deg,
        transparent 360deg
    );
    animation: spinFast 2.5s linear infinite;
    -webkit-mask: 
        radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
}

@keyframes spinFast {
    100% {
        transform: rotate(360deg);
    }
}

/* ===== HI?U ?NG PULSE M?NH � PREMIUM GLOW ===== */
.career-box:hover .circle-img {
    animation: pulseStrong 1.3s infinite;
}

@keyframes pulseStrong {
    0% { box-shadow: 0 0 30px rgba(225,36,84,0.2); }
    50% { box-shadow: 0 0 65px rgba(225,36,84,0.65); }
    100% { box-shadow: 0 0 30px rgba(225,36,84,0.2); }
}

/* ===== HI?U ?NG N?I FLOATING (T? �?NG) ===== */
.career-box {
    animation: fadeInUp 1.2s ease forwards,
               floating 4s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

/* ===== IMAGE INSIDE ===== */
.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
}

/* Zoom ?nh m?nh khi hover */
.career-box:hover .circle-img img {
    transform: scale(1.25);
}

/* ===== TEXT ===== */
.career-text {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
}












/* ===== TEXT NEON + GRADIENT ===== */
.career-text {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #e12454;
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: textFadeUp 1s ease forwards;
}

/* Delay theo th? t? */
.delay1 .career-text { animation-delay: 0.3s; }
.delay2 .career-text { animation-delay: 0.5s; }
.delay3 .career-text { animation-delay: 0.7s; }



/* Hi?u ?ng fade-in text */
@keyframes textFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}













/* ===== TH? CARD  ===== */
 :root {
  --accent: #e12454; /* m�u ch? d?o */
  --bg: #fafafa;
  --card: #ffffff;
  --muted: #6b7280;
  --radius: 14px;
  --container-width: 720px;
}

.card {
  width: 100%;
  max-width: var(--container-width);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 6px 30px rgba(9, 30, 66, 0.08);
  padding: 26px;
  display: grid;
  grid-template-columns: 88px 1fr 220px;
  gap: 18px;
  align-items: center;
  margin-left: auto;
  margin-right: 0; /* Ho?c d? m?c d?nh */
}

/* logo column */
.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(225, 36, 84, 0.08), rgba(225, 36, 84, 0.02));
  border: 1px solid rgba(225, 36, 84, 0.06);
  font-weight: 800;
  color: var(--accent);
  font-size: 18px;
}

/* center column */
.info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.company {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0;
}

.subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fbf7f8;
  border: 1px solid rgba(15, 23, 42, 0.03);
  font-size: 13px;
}

.chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* right column */
.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.btn {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: white;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(225, 36, 84, 0.12);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.muted-note {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

/* responsive */
@media (max-width: 780px) {
  .card {
    grid-template-columns: 72px 1fr; /* Reducing columns to 2 */
    grid-template-areas: 
      "logo info"
      "logo actions";
    padding: 18px; /* Reducing padding for mobile */
  }

  .logo {
    width: 56px;
    height: 56px;
    font-size: 16px;
  }

  .company {
    font-size: 18px; /* Slightly smaller on mobile */
  }

  .subtitle {
    font-size: 12px; /* Slightly smaller font */
  }

  .meta {
    gap: 4px; /* Reducing gap between chips */
  }

  .chip {
    font-size: 12px; /* Smaller chip font */
    padding: 6px 10px;
  }

  .actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px; /* Adding space between buttons */
  }

  .muted-note {
    text-align: left;
    font-size: 14px; /* Slightly bigger for mobile readability */
  }
}

/* small accessibility focus */
.btn:focus {
  outline: 3px solid rgba(225, 36, 84, 0.18);
  outline-offset: 2px;
}

a {
  color: inherit;
}

/* === Animation Added === */

@keyframes logoFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes logoGlow {
  0% { box-shadow: 0 0 0 rgba(225, 36, 84, 0.0); }
  50% { box-shadow: 0 0 18px rgba(225, 36, 84, 0.45); }
  100% { box-shadow: 0 0 0 rgba(225, 36, 84, 0.0); }
}

.logo {
  animation: logoFloat 3.2s ease-in-out infinite, logoGlow 3s ease-in-out infinite;
}

/* === NEW: Text stagger fade === */
@keyframes itemFade {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.company { animation: itemFade 0.8s ease forwards; }
.subtitle { animation: itemFade 0.9s ease forwards; }
.chip:nth-child(1) { animation: itemFade 1s ease forwards; }
.chip:nth-child(2) { animation: itemFade 1.1s ease forwards; }

@keyframes fadeSlide {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes softGlow {
  0% { box-shadow: 0 0 0px rgba(225, 36, 84, 0.0); }
  50% { box-shadow: 0 0 14px rgba(225, 36, 84, 0.28); }
  100% { box-shadow: 0 0 0px rgba(225, 36, 84, 0.0); }
}

.card {
  animation: fadeSlide 0.9s ease-out;
  position: relative;
  overflow: hidden;
}

/* light sweep */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: sweep 4s infinite;
}

@keyframes sweep {
  0% { left: -120%; }
  40% { left: 140%; }
  100% { left: 140%; }
}

.btn:hover {
  animation: softGlow 1.8s infinite;
  color: #e12454;
}



.scale-wrap{
  transform: scale(0.7);
  transform-origin: top center;
}

/* Mobile: tr? l?i 100% nguy�n b?n */
@media (max-width: 780px){
  .scale-wrap{
    transform: scale(1);
  }
}