@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;500&display=swap');

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.box-container {
    max-width: 100%;
    margin-left: 40px;
    margin-right: 40px;
}

.box-block-content-inner {
    background: #FFF;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    color: #3D3D40;
    padding: 15px 20px 10px 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.animated-button1 {
    background: linear-gradient(-30deg, #F4B744 50%, #FDCC6F 50%);
    padding: 10px 40px;
    font-weight: bold;
    margin-right: 40px;
    display: inline-block;
    float: right;
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    overflow: hidden;
    color: #FF5800;
    font-size: 16px;
    letter-spacing: 2.5px;
    text-align: center;
    /*text-transform: uppercase;*/
    text-decoration: none;
    border-radius: 6px;
    -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

    .animated-button1:hover {
        text-decoration: none;
    }

    .animated-button1::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0;
        -webkit-transition: .2s opacity ease-in-out;
        transition: .2s opacity ease-in-out;
    }

    .animated-button1:hover::before {
        opacity: 0.1;
        color: #000;
    }

    .animated-button1 span {
        position: absolute;
    }

        .animated-button1 span:nth-child(1) {
            top: 0px;
            left: 0px;
            width: 100%;
            height: 2px;
            background: -webkit-gradient(linear, right top, left top, from(rgba(246, 255, 0, 0)), to(#F1FF00));
            background: linear-gradient(to left, rgba(246, 255, 0, 0), #F1FF00);
            -webkit-animation: 2s animateTop linear infinite;
            animation: 2s animateTop linear infinite;
        }

@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.animated-button1 span:nth-child(2) {
    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(246, 255, 0, 0)), to(#F1FF00));
    background: linear-gradient(to top, rgba(246, 255, 0, 0), #F1FF00);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.animated-button1 span:nth-child(3) {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(246, 255, 0, 0)), to(#F1FF00));
    background: linear-gradient(to right, rgba(246, 255, 0, 0), #F1FF00);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.animated-button1 span:nth-child(4) {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(246, 255, 0, 0)), to(#F1FF00));
    background: linear-gradient(to bottom, rgba(246, 255, 0, 0), #F1FF00);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

.auto-style1 {
    width: 994px;
}

.blog-slider-sub {
    position: relative;
    max-width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
    background-image: linear-gradient(to right,#2461ad,#2483ad,#2461ad);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    padding: 25px;
    border-radius: 10px;
    height: auto;
    transition: all 0.3s;
    word-wrap: break-word;
}

.blink1 {
    animation: blinkme 1s linear infinite;
}

@keyframes blinkme {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#form-wrapper {
    width: 100%;
    height: 90px;
    padding: 20px;
    position: relative;
    background-color: #fff;
    background-image: url(../images/letter.png);
    background-repeat: no-repeat;
    background-size: cover;
}

    #form-wrapper:before, #form-wrapper:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 15px;
        left: 10px;
        width: 50%;
        top: 80%;
        max-width: 100%;
        background: rgba(0, 0, 0, 0.7);
        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
        transform: rotate(-3deg);
    }

    #form-wrapper:after {
        transform: rotate(3deg);
        right: 10px;
        left: auto;
    }

/* CSS nền hiển thị Modal */
.nenmodal .nenmodal2 {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: none;
}
/* CSS bảng nội dung Modal */
.nenmodal .ndmodal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    background: #fff;
    width: 600px;
    z-index: 1000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
    border-radius: 20px;
    display: block;
    position: fixed;
    box-shadow: 0px 0px 10px #111;
}

@media (max-width: 700px) {
    .nenmodal .ndmodal {
        width: 90%;
    }
}
/* CSS bao bọc của nút tắt Modal */
.nenmodal .closemodal {
    text-align: center;
    margin-top: -40px;
    margin-bottom: 10px;
}
/* CSS tieu de của Modal */
.titlemodal {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}
/* CSS nút tắt modal */
.closemodal button {
    width: 40px;
    height: 40px;
    font-size: 30px;
    padding: 0px;
    border-radius: 100%;
    background: #333;
    color: #fff;
    border: none;
}

.nenmodal.active .nenmodal2 {
    display: block;
}
/* CSS hiệu ứng hiển thị Modal */
.nenmodal.active .ndmodal {
    transition: all 300ms ease-in-out;
    transform: translate(-50%,-50%) scale(1);
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background-image: url(../images/bg-header2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 100;
}

nav {
    display: flex;
    align-items: flex-end;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    justify-content: space-between;
    transition: align-items .2s;
}

.logo {
    font-size: 2rem;
    display: inline-block;
    padding: 20px 30px;
    background: #F35B66;
    color: #fff;
    margin: 50px 0 0 50px;
    transition: all .2s;
}
/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main {
    display: block;
    padding: 100px 20px;
}
/* STYLES FOR THE "scroll" CLASS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.scroll {
    box-shadow: 0 7px 0 0 rgba(0, 0, 0, .1);
}

    .scroll .logo {
        padding: 10px 20px;
        font-size: 1.5rem;
    }

    .scroll nav {
        align-items: center;
    }

    .scroll .logo,
    .scroll ul,
    .scroll .toggle-menu {
        margin: 0;
    }


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 1060px) {
    header {
        padding: 10px;
    }

    nav {
        align-items: center;
    }

    ul {
        display: none;
    }

    .logo {
        font-size: 1.8rem;
        margin: 10px 0 0 10px;
    }

    .toggle-menu {
        display: block;
    }
}
/* STYLES FOR THE COUNTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.counter {
    visibility: hidden;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 1px;
    padding: 5px;
    color: #fff;
    background: #DD3543;
}
/*GLOBALS*/
.box-body {
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    font-family: 'Anton', sans-serif;
}

#wrapper{
	width:600px;
	margin:50px auto;
	height:400px;
	position:relative;
	color:#fff;
	text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;	
}

#slider-wrap{
	width:600px;
	height:400px;
	position:relative;
	overflow:hidden;
}

#slider-wrap ul#slider{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;		
}

#slider-wrap ul#slider li{
	float:left;
	position:relative;
	width:600px;
	height:400px;	
}

#slider-wrap ul#slider li > div{
	position:absolute;
	top:25px;
	left:25px;	
}

#slider-wrap ul#slider li > div h3{
	font-size:36px;
	text-transform:uppercase;	
}

#slider-wrap ul#slider li > div span{
	font-family: Neucha, Arial, sans serif;
	font-size:21px;
}

#slider-wrap ul#slider li i{
	text-align:center;
	line-height:400px;
	display:block;
	width:100%;
	font-size:90px;	
}
/*btns*/
.btns{
	position:absolute;
	width:50px;
	height:60px;
	top:50%;
	margin-top:-25px;
	line-height:57px;
	text-align:center;
	cursor:pointer;	
	background:rgba(0,0,0,0.1);
	z-index:100;
	-webkit-user-select: none;  
	-moz-user-select: none; 
	-khtml-user-select: none; 
	-ms-user-select: none;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	transition: all 0.1s ease;
}

.btns:hover{
	background:rgba(0,0,0,0.3);	
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 0px;}
#counter{
	top: 30px; 
	right:35px; 
	width:auto;
	position:absolute;
}

#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}
/*bar*/
#pagination-wrap{
	min-width:20px;
	margin-top:350px;
	margin-left: auto; 
	margin-right: auto;
	height:15px;
	position:relative;
	text-align:center;
}

#pagination-wrap ul {
	width:100%;
}

#pagination-wrap ul li{
	margin: 0 4px;
	display: inline-block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#fff;
	opacity:0.5;
	position:relative;
    top:0;
}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
	opacity:1;
	box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;	
}

/*Header*/
h1, h2{text-shadow:none; text-align:center;}
h1{	color: #666; text-transform:uppercase;	font-size:36px;}
h2{ color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size:18px; margin-bottom:30px;} 

/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
	-webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	transition: all 0.3s cubic-bezier(1,.01,.32,1);	
}

@media (max-width: 1100px) {
    #wrapper {
        display:none;
    }
}
@media (min-width: 1100px) {
    #wrapper1 {
        display: none;
    }
}

@media (max-width: 1000px) {
    .blog-slider-sub{
        display:none;
    }
}