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

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

header {
    background-color: #f8f9fa;
    padding: 10px 0;
    height: auto; /* Tự động điều chỉnh chiều cao theo nội dung */
}

.navbar-brand img {
    max-width: 150px;
}

.navbar-nav .nav-link {
    color: #252525 !important;
    font-weight: bold; /* Chữ in đậm */
    margin-right: 15px;
    transition: background-color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    background-color: #e1e1e1; /* Màu đỏ khi hover */
    color: #fff !important;/* Màu chữ chuyển thành trắng khi hover */
    border-radius: 5px; /* Bo góc nhẹ khi hover */
    padding: 5px 10px; /* Thêm padding để có hiệu ứng đẹp hơn khi hover */
}
.special-heading {
    color: black; /* Màu đen */
    font-weight: bold; /* In đậm */
    text-align: center; /* Căn giữa */
    margin-bottom: 3rem; /* Khoảng cách dưới */
}
.hero-section {
    height: calc(100vh - 80px); /* 100vh trừ đi chiều cao của header */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.carousel-inner, .carousel-item {
    height: 100%; /* Đảm bảo các slide có chiều cao bằng với phần hero-section */
}

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: left;
    width: 100%;
    padding: 0 250px;
    color: #fff;
}

.hero-content {
    text-align: left;
}

.hero-content h1 {
    color: #dd000d;
	font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.hero-content p, .hero-content span {
    color: #fff;
}

.hero-content span {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
.btn {
	margin-top: 50px;
}
.btn-rounded {
    border-radius: 25px;
}

.btn-danger {
	color: #fff;
    background-color: transparent;
    border-color: #dd000d;
}

.btn-danger:hover {
    color: #fff;
    background-color: #dd000d;
    border-color: #dd000d;
}


.carousel-control-prev,
.carousel-control-next {
    z-index: 10; /* Đảm bảo nút nằm trên tất cả các phần tử khác */
    pointer-events: auto; /* Đảm bảo rằng các sự kiện chuột vẫn hoạt động */
}


/* Điều chỉnh cho màn hình nhỏ hơn 767px */
/* Điều chỉnh cho màn hình nhỏ hơn 767px */
/* Điều chỉnh cho màn hình nhỏ hơn 767px */
@media (max-width: 767px) {


    /* Căn giữa văn bản và đặt nó gần phía trên */
    .carousel-caption {
        top: 5%; /* Đặt văn bản gần phía trên */
        left: 50%;
        transform: translateX(-50%); /* Căn giữa theo chiều ngang */
        padding: 0 10px;
    }

    /* Điều chỉnh nút btn gần phía dưới */
    .carousel-caption .btn {
        position: absolute;
        bottom: 10%; /* Đặt nút gần phía dưới */
        left: 50%;
        transform: translateX(-50%);
    }

    .hero-section {
        height: auto; /* Chiều cao vừa với màn hình */
    }

    .hero-content {
        text-align: center;
        padding-left: 0;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .hero-content span {
        font-size: 1.2rem;
    }
}

/* Thêm shadow cho thẻ card */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow nhẹ cho card */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Hiệu ứng chuyển động khi hover */
}

.card:hover {
    transform: translateY(-5px); /* Di chuyển nhẹ card lên trên khi hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Tăng shadow khi hover */
}

/* Điều chỉnh kích thước hình ảnh trong thẻ card */
.card-img-top {
    max-width: 60%; /* Giảm kích thước hình ảnh xuống 60% */
    height: auto; /* Giữ nguyên tỷ lệ khung hình */
    display: block;
    margin: 10px auto; /* Căn giữa hình ảnh */
    transition: transform 0.3s ease-in-out; /* Hiệu ứng chuyển động khi hover */
}

.card:hover .card-img-top {
    transform: scale(1.05); /* Phóng to hình ảnh khi hover */
}

/* Canh giữa và điều chỉnh kích thước nút "Xem Ngay" */
.card-body {
    text-align: center; /* Canh giữa toàn bộ nội dung trong card-body */
}

.card .btn {
    font-size: 1rem; /* Giảm kích thước chữ */
    padding: 8px 16px; /* Giảm padding */
    width: auto; /* Để nút có chiều rộng tự nhiên */
    display: block;
    margin: 10px auto 0 auto; /* Canh giữa nút */
}

.card .btn:hover {
    background-color: #c82333; /* Đổi màu nền khi hover */
}

#products .btn-danger {
	width: fit-content;
	color: #252525;
    background-color: transparent;
    border-color: #dd000d;
	
}

#products .btn-danger:hover {
    color: #fff;
    background-color: #dd000d;
    border-color: #dd000d;
}


.video-container {
    max-width: 100%;
    margin: 0 auto;
}

.carousel-item {
    text-align: center;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #000;
    border-radius: 50%;
}

/* Thêm shadow cho thẻ card */
.card.why-column {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* Shadow nhẹ cho card */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Hiệu ứng chuyển động khi hover */
    display: flex;
    flex-direction: column; /* Đặt các phần tử bên trong card theo cột dọc */

}

.card.why-column:hover {
    transform: translateY(-5px); /* Di chuyển nhẹ card lên trên khi hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Tăng shadow khi hover */
}

/* Điều chỉnh kích thước và vị trí hình ảnh logo */
.card.why-column .card-img-top {
    max-width: 120px;
    margin-top: 10px;
    margin-bottom: 20px; /* Đẩy logo lên trên bằng cách thêm margin-bottom */
    padding-top: 40px;
    display: block; /* Đảm bảo hình ảnh là một khối riêng biệt */
    text-align: left; /* Đảm bảo canh lề trái */
	margin-left: 20px;
}

/* Đảm bảo chiều cao của tất cả các card là như nhau */
.card.why-column .card-body {
    flex-grow: 1; /* Để phần body chiếm hết không gian còn lại */
}

.card-title {
    font-weight: 400; /* Chữ in đậm cho tiêu đề */
}

/* Đảm bảo chiều cao các col-md-3 col-sm-6 mb-4 là bằng nhau */
.row {
    display: flex;
    flex-wrap: wrap;
}

.col-md-3.col-sm-6.mb-4 {
    display: flex;
    flex-direction: column;
}

.card.why-column {
    flex: 1; /* Đảm bảo tất cả các card có chiều cao bằng nhau */
}

/* Điều chỉnh kích thước nút "Xem Tất Cả Tính Năng" */
.why-ddpai-section .btn {
    color: #252525;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 25px;
}

.why-ddpai-section .btn:hover {
    background-color: #c82333; /* Đổi màu nền khi hover */
}

.why-ddpai-section .btn-rounded {
    border-radius: 25px;
}


.blogs-section .card {
    height: 100%; /* Đảm bảo chiều cao của card */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 20px; /* Bo góc cho card */
    overflow: hidden; /* Đảm bảo các phần tử bên trong không vượt ra ngoài */
}

.blogs-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.blogs-section .card-img-top {
	max-width: 100%; /* Giảm kích thước hình ảnh xuống 60% */
    height: 200px; /* Giới hạn chiều cao của ảnh */
    object-fit: cover; /* Ảnh sẽ phủ đầy vùng chứa mà không bị biến dạng */
    width: auto;
    margin: 0; /* Loại bỏ margin của ảnh */
}

.blogs-section .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blogs-section .card-text {
    flex-grow: 1; /* Để đoạn text chiếm hết không gian còn lại */
}

.blogs-section .btn-link {
    text-align: left;
    color: #007bff; /* Màu của link */
    font-weight: 600;
    text-decoration: none;
}

.blogs-section .btn-link:hover {
    text-decoration: underline;
}

.blogs-section .d-flex {
    justify-content: space-between; /* Đảm bảo căn giữa tiêu đề và nút */
}

.blogs-section .btn {
    color: #252525;
	margin-top:0px;
}

.blogs-section .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.blogs-section .col-md-4,
.blogs-section .col-sm-6 {
    display: flex;
    flex-direction: column;
}

.support-section .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 5px;
    overflow: hidden;
}

.support-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.support-section .card-body {
	margin-top:20px;
	margin-bottom:20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.support-section .card-title {
    font-weight: bold;
    margin-bottom: 15px;
}

.support-section .card-text {
    flex-grow: 1;
}

.support-section .icon img {
    display: block;
}

.support-section .btn {
    color: #252525;
	margin: 0px;
}

.support-section .btn-rounded {
    align-self: flex-start; /* Căn nút về lề trái */
}

.support-section .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.support-section .col-md-6,
.support-section .col-sm-12 {
    display: flex;
    flex-direction: column;
}