@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;
    min-height: 330px;
    height: auto;
    transition: all 0.3s;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.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;
}

/* === Khung slider chung === */
#wrapper {
    width: 100%;
    max-width: 550px; /* ~550px như bạn muốn */
    margin: 30px auto;
    height: auto;
    position: relative;
    color: #fff;
    text-shadow: rgba(0,0,0,0.1) 2px 2px 0px;
}

/* khung chứa list slide */
#slider-wrap {
    width: 100%;
    max-width: 550px; /* cùng với wrapper */
    height: auto; /* không khoá chiều cao */
    position: relative;
    overflow: hidden;
}

    /* list slide – ngang, nhưng cao theo ảnh */
    #slider-wrap ul#slider {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

        /* mỗi slide */
        #slider-wrap ul#slider li {
            float: left;
            position: relative;
            width: 100%;
            height: auto;
        }

            /* bỏ tuyệt đối, cho div + img chiếm full */
            #slider-wrap ul#slider li > div {
                position: static;
                top: auto;
                left: auto;
                width: 100%;
                height: auto;
            }

            /* ảnh trong slide – không vỡ, co đúng tỉ lệ */
            #slider-wrap ul#slider li img {
                width: 100%;
                height: auto;
                display: block;
                object-fit: contain;
            }

/* mobile: cho slider rộng 100% container */
@media (max-width: 1000px) {
    #wrapper,
    #slider-wrap {
        max-width: 100%;
        margin: 20px auto;
    }
}


#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;
    }
}

/* Khi màn hình nhỏ: ẩn cột giới thiệu, slider chiếm 100% */
@media (max-width: 1000px) {
    .intro-layout td:first-child {
        width: 100% !important;
        display: block;
    }

    .intro-layout td:last-child {
        display: none; /* ẩn "GIỚI THIỆU CHUNG" */
    }
}


/* Slider chính – luôn full chiều ngang, co giãn ảnh đúng tỉ lệ */
#introCarousel img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==== STYLE MŨI TÊN ==== */
#slider-wrap .btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,0.35); /* nền tròn mờ mờ, thích có thể bỏ */
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    /* icon mũi tên */
    #slider-wrap .btns i {
        font-size: 18px;
        color: #fff;
    }

/* vị trí trái/phải */
#slider-wrap #previous {
    left: 10px;
}

#slider-wrap #next {
    right: 10px;
}
@media (max-width: 991px) {
    .intro-layout td:last-child {
        display: none;
    }

    .intro-layout td:first-child {
        width: 100% !important;
    }
}
/* ===========================
   INTRO CAROUSEL (Bootstrap)
   =========================== */

/* Ảnh luôn đúng tỉ lệ, không vỡ */
#introCarousel .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Desktop: slider khoảng 550x350, nằm giữa cột trái */
@media (min-width: 992px) {
    #introCarousel {
        max-width: 600px; /* ngang ~550 */
        margin: 0 auto; /* căn giữa trong TD */
    }
}

/* Mobile / tablet: slider full chiều ngang khung trắng */
@media (max-width: 991.98px) {
    #introCarousel {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Cột slider chiếm 100%, ẩn GIỚI THIỆU CHUNG */
    .intro-layout td:first-child {
        width: 100% !important;
        display: block;
    }

    .intro-layout td:last-child {
        display: none;
    }
}

#introCarousel .carousel-control-prev,
#introCarousel .carousel-control-next {
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent; /* bỏ nền ô vuông */
    border: none; /* bỏ viền ô vuông */
    outline: none; /* bỏ outline khi focus */
    box-shadow: none; /* nếu có bóng */
    padding: 0;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}


    /* Vẽ nền tròn mờ mờ cho icon */
    #introCarousel .carousel-control-prev::before,
    #introCarousel .carousel-control-next::before {
        content: "";
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.35);
    }

/* Icon mũi tên trắng, rõ nét */
#introCarousel .carousel-control-prev-icon,
#introCarousel .carousel-control-next-icon {
    width: 18px;
    height: 18px;
    filter: invert(1) drop-shadow(0 0 3px rgba(0,0,0,.7));
    background-size: 100% 100%;
}