header {
    position: fixed;
    width: 100%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 999;
    top: 0;
    left: 0;
}

header.white {
    color: #fff;
}

header.white a {
    color: #fff;
}

header.default {
    background-color: transparent;
}

header.active {
    background-color: #ffffff4d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
    color: #001E40 !important;
}

header.active a {
    color: #001E40;
}

.hero-section {
    background: url(../images/herobg.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
    padding: 240px 0;
}

.hero-section h2 {
    font-size: 92px;
    font-family: Magoat;
    font-weight: bold;
}

.hero-section p {
    font-size: 20px;
    margin: 20px 0;
}

.hero-section a {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 40px;
    border: 2px solid #001E40;
    color: #001E40;
    font-weight: bold;
}

header.white .top-header {
    border-bottom: 1px solid #ffffff45;
}

header.active .top-header {
    border-bottom: 1px solid #001E40;
}

.top-header {
    padding: 12px 0;
    border-bottom: 1px solid #001E40;
}

.top-header a {
    color: #001E40;
    font-style: normal;
    font-size: 20px;
}

.navbar .nav-link {
    color: #001E40;
    padding: 8px 20px;
    border-radius: 24px;
}

header.white .navbar .nav-link {
    color: #fff;
    padding: 8px 20px;
    border-radius: 24px;
}

header.active .nav-link {
    color: #001E40 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    background: #ADF0CD;
    color: #001E40 !important
}

.navbar .nav-item {
    margin: 0 12px;
}

.section-title a {
    color: #001E40;
    font-size: 40px;
}

.service-item .top {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 🔥 chuyển thành cột (hàng dọc) */
    align-items: flex-start;
    /* căn trái các phần tử */
    justify-content: flex-end;
    /* đẩy xuống dưới */
    color: #fff;
    padding: 24px;
    border-radius: 20px;
    overflow: hidden;
    gap: 32px;
    /* khoảng cách giữa các phần tử dọc */
}

.service-item .top1 {
    background: url("../images/dv1.jpg") no-repeat center center/cover;
}

.service-item .top2 {
    background: url("../images/dv2.jpg") no-repeat center center/cover;
}

.service-item .top3 {
    background: url("../images/dv3.jpg") no-repeat center center/cover;
}

.service-item .top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #001E40, #001e401c);
    z-index: 1;
}

.service-item .top h3 {
    position: relative;
    z-index: 2;
    color: #fff;
    margin: 0;
    font-size: 48px;
    font-weight: bold;
}

.service-item .top h3 span {
    font-size: 24px;
    font-weight: normal;
    display: block;
}

.service-item .top .price {
    z-index: 2;
}

.service-item .top .price span {
    padding: 8px 16px;
    border-radius: 24px;
    background: #fff;
    color: #001E40;
}

.service-item .top .price a {
    padding: 8px 16px;
    border-radius: 24px;
    border: 1px solid #fff;
    color: #fff;
}

.service-item ul {
    margin: 0;
    padding: 0;
}

.service-item ul li {
    list-style: none;
    display: block;
    margin: 12px 0;
}

.service-item ul li:not(:last-child) {
    border-bottom: 1px solid #001E40;
}

.service-item ul li a {
    color: #001E40;
    padding: 12px 0;
    display: block;
}

.service-item ul li a i {
    margin-right: 20px;
}

.form-wrapper {
    background: url(../images/formbg.jpg) no-repeat;
    background-position: center;
    border: 1px solid #001E40;
    padding: 40px;
    border-radius: 20px;
}

.form-wrapper-title {
    margin-bottom: 20px;
}

.form-wrapper-title h2 {
    text-transform: uppercase;
    font-size: 28px;
    font-weight: bold;
    font-family: Magoat;
}

.form-wrapper-title a {
    font-size: 28px;
    color: #001E40;
}

.form-wrapper-body {
    border-top: 1px solid #001E40;
    border-bottom: 1px solid #001E40;
}

.form-wrapper-body h3 {
    font-weight: normal;
    text-align: center;
}

.form-wrapper-body form {
    padding: 40px;
}

.form-wrapper-body form input {
    border: 1px solid #001E40;
}

.form-wrapper-body form button {
    background-color: #001E40;
    padding: 12px;
    border: #001E40;
}

.form-wrapper-body form button:hover,
.form-wrapper-body form button:focus,
.form-wrapper-body form button:active {
    background-color: #001226 !important;
    padding: 12px;
    border: #001226 !important;
}

.green-box {
    background: #ADF0CD;
    padding: 20px;
    font-size: 20px;
    /* Rectangle 19316 */
    box-shadow: 0 0 20px 5px rgba(0, 30, 64, 0.1);
    border-radius: 15px;
}

.row-item>div:first-child {
    flex: 1;
    padding-right: 12px;
    border-right: 1px solid #001E40;
    /* border giữa 2 col */
}

.form-wrapper-bottom {
    margin-top: 20px;
    color: #001E40;
    font-size: 18px;
}

.form-wrapper-bottom a {
    color: #001E40;
}

.xaytot-card {
    padding: 40px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #001E40;
}

.divider {
    background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
    width: 100%;
    height: 1px;
}

/*===============PRODUCT ITEM==================*/
.product-item {
    margin: 20px 0;
    position: relative;
}
.product-item > a,
.product-item > a > img{
    max-width: 100%;
    height: auto;
}
.product-item figure {
    position: relative;
}

.product-item h2 a {
    color: #001E40;
    text-decoration: none;
}

.product-item h2 a:hover {
    text-decoration: underline;
}

.product-item h2 {
    font-weight: 500;
    font-size: 16px;
    color: #001E40;
    margin-top: 20px;
}

/* Zoom In #1 */
.hover01 figure {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

.hover01 figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.hover01 figure:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.gallery a {
    width: 100%;
}

.gallery-item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* hoặc 1/1 nếu muốn ô vuông */
    overflow: hidden;
    border-radius: 6px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ảnh full khung, cắt thừa */
    display: block;
}

.xaytot-card.about {
    background: url(../images/aboutbg.jpg) no-repeat;
    background-position: center;
    background-size: cover;
}

.about-box {
    padding-top: 80px !important;
}

.about-box h3 {
    font-size: 40px;
    font-weight: normal;
}

.xaytotvn {
    font-size: 60px;
    font-weight: bold;
    font-family: Magoat;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}

.dot.black {
    background: #001E40;
}

.line {
    height: 2px;
    background: linear-gradient(to right, #fff, transparent);
    display: inline-block;
    margin-left: -8px;
}

.line.black {
    height: 2px;
    background: linear-gradient(to right, #000000, transparent);
    display: inline-block;
    margin-left: -8px;
}

.xaynhatrongoi-section {
    background: url(../images/xaynhatrongoibg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 200px 0;
}

.xaynhatrongoi-section h1 {
    color: #ADF0CD;
    font-family: Magoat;
    text-align: center;
    font-size: 60px;
}

.price-card {}

.price-card ul {}

.price-card ul li {
    padding: 8px 0;
}

.price-card ul li:not(:last-child) {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0)) 1;
}

.price-card h4 {
    font-size: 32px;
    font-weight: 400 !important;
}

.price-card h4 span {}

.section-margintop {
    margin-top: -200px;
    z-index: 1;
}

.background104274 {
    background: #104274;
}

.page-topsection {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 280px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    color: #A4F5D3 !important;
}

.page-topsection .overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 30, 64, 0.7);
    /* lớp phủ #001E40 opacity 70% */
    z-index: 0;
}

.page-topsection .content {
    position: relative;
    z-index: 2;
    /* nằm trên lớp phủ */
}

.page-topsection .content h2 {
    font-family: Magoat, serif;
    font-size: 60px;
    color: #ADF0CD;
    text-align: center;
}

.page-topsection .content h2 span {
    display: block;
}

.bg-light-pink {
    background-color: #fae8ea;
    /* hồng nhạt */
}

.kiemdinh-box {
    background: #ADF0CD;
    padding: 40px;
    border-radius: 24px;
}

.white-box ul li,
.kiemdinh-box ul li {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.5rem;
}

ul li:last-child {
    border-bottom: none;
}

.kiemdinh-box h3 {
    font-size: 32px;
    font-family: Magoat;
    font-weight: bold;
    color: #001E40;
}

.white-box {
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #001E40;
    background: #fff;
}

.custom-box {
    position: relative;
    background: #fff;
    border: 1px solid #001E40;
    border-radius: 24px;
    padding: 24px;
    z-index: 1;
    font-size: 18px;
    font-style: italic;
}

.custom-box::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -16px;
    height: 15px;
    border-radius: 0 0 32px 32px;
    background: #A4F5D3;
    z-index: -1;
    border-bottom: 1px solid;
}

.xaytot-contentdetail {}

.xaytot-contentdetail h2 {}

.xaytot-contentdetail h3 {
    margin: 32px 0;
}

.xaytot-contentdetail h4 {
    margin: 24px 0;
}

.xaytot-contentdetail p {
    line-height: 160%;
}