/* Text Hide */
:root {

    --c1: #225333;

    --c2: #1E4A2D;

    --card: green;

    --color-red: #ec2d3f;

    --color-medium-red: #cc2c32;

    --color-dark-red: #c31829;

    --color-green: rgb(197 18 42);

    --color-dark-green: rgb(197 18 42);

    --color-black: #212529;

    --color-gray: #6c757d;

    --background-static: rgb(197 18 42);

    --background-hover: #eceb1b;

    --color-static: #000;

    --color-hover: #ec2d3f;

    --color-white: #fff;

}


.text-split {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 3 !important;

}



.text-split-1 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 1 !important;

}



.text-split-2 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

}



.text-split-3 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 3 !important;

}



.text-split-4 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 4 !important;

}



.text-split-5 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 5 !important;

}



.text-split-6 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 6 !important;

}



.text-split-7 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 7 !important;

}



.text-split-10 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 10 !important;

}







/* header */
.head-top .wrap-content {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    gap: 25px; 
    margin-bottom: 5px;

}

.wrap-content .head-col:first-child {
    display: flex;
    align-items: center;
    gap: 15px; 
}

.wrap-content .head-col:second-child {
    display: flex;
    align-items: center;
    gap: 15px; 
}

.wrap-content .head-col img {
    width: 180px;
    height: 150px;

}

.text-head {
    color: var(--c1);
}

.text-head h3 {
    margin: 0;
    font-size: 25px;
    font-weight: bold;
    white-space: nowrap;
    
}

.text-head h2 {
    margin: 0;
    font-size: 35px;
    font-weight: bold;
    color: var(--c1); 
    text-align: center;

}

.text-head p {
    margin: 5px 0 0 0;
    font-style: italic;
}

.head-col p {
    margin: 5px 0; 
    text-align: center;
}

.highlight {
    color: red;
    font-weight: bold;
}

.head-top {
    /* padding: 0.5rem 0rem; */
    background: white;
}


.head-top-introduce {

    gap: 5px;

}



.head-top-ablout {

    gap: 5px;

    position: relative;

    cursor: pointer;

}



.head-top-ablout ul.list {

    list-style: none;

    position: absolute;

    top: 20px;

    right: 0px;

    padding: 0px;

    margin: 0px;

    opacity: 0;

    transition: 0.3s all;

    pointer-events: none;

    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);

}



.head-top-ablout:hover ul.list {

    opacity: 1;

    transition: 0.3s all;

    transform: perspective(600px) rotateX(0);

    visibility: visible;

    z-index: 9999;

    pointer-events: visible;

}



.head-top-ablout ul.list li a:hover {

    transition: 0.3s all;

    color: rgb(197 18 42);

}



.head-top-ablout ul.list li {



    background: white;

    min-width: 250px;

    padding: 0.9rem;

    border: none;

}



.head-top-ablout ul.list li a {

    color: black;

}



/*  */

.grid-product-menu {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-left: 5px solid #2E8B57;

    border-top: 5px solid #2E8B57;

}



.grid-product-menu .box-product .item-product {

    border-right: 5px solid #2E8B57;

    border-bottom: 5px solid #2E8B57;

}



.show_padding {

    position: relative;

}



.grid-product-seller {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.grid-product-seller .box-product .item-product {

    border: 5px solid #2E8B57;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    margin-bottom: 15px;

}



.owl-page .box-product .item-product {

    border: 5px solid #2E8B57;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    margin-bottom: 15px;

}



/* service */

.wrap-service {

    padding: 50px 0px;

}



.box-main-service {

    display: flex;

    gap: 50px;

}



.left-group-service {

    width: 50%;

    position: relative;



}



.right-group-service {

    width: calc(100% - 50%);

    background: black;
}



.box-service-item {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

}



.service-item {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

    position: relative;

    margin-left: 25px;

    margin-right: 25px;

    cursor: pointer;

}

.content-camket{
    color: white;
    font-weight: bold;
    margin-top: 50px;
    margin-left: 30px;
}

.camket-item {
    display: flex; /* Sắp xếp các nội dung theo hàng ngang */
    align-items: flex-start; /* Căn các mục theo chiều dọc (top alignment) */
    margin-top: 30px;
}

.camket-item img {
    margin-right: 20px; /* Khoảng cách giữa hình ảnh và nội dung bên phải */
    display: block; /* Đảm bảo hình ảnh không bị inline */
    max-width: 50px; /* Giới hạn kích thước hình ảnh (có thể tùy chỉnh) */
    height: auto;
}

.camket-content {
    display: flex;
    flex-direction: column; /* Nội dung (h3 + p) xếp theo cột (dọc) */
    text-align: justify; /* Căn chỉnh đều hai bên nội dung văn bản */
    margin-right: 10px;
}

.camket-name {
    margin-right: 10px;
}

.service-img {

    /* background-color: rgb(255 247 247); */

    line-height: 90;

    height: 90px;

    width: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.service-img img {

    z-index: 2;

}



.circles-box {

    position: absolute;

    top: 0px;

    background-color: rgb(255 247 247);

    transition-duration: 500ms;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    height: 90px;

    width: 90px;

    border-radius: 50%;

    z-index: 1;

}



.circles-box .circle-one {

    background-color: rgb(153 227 255);

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    right: 50%;

    top: -4px;

    transform: translateX(-50%);

    opacity: 0;



}



.circles-box .circle-two {

    background-color: rgb(254 76 28);

    width: 10px;

    height: 10px;

    border-radius: 50%;

    position: absolute;

    left: 50%;

    bottom: -4px;

    transform: translateX(-50%);

    opacity: 0;



}



.service-item:hover .service-img .circles-box .circle-one,

.service-item:hover .service-img .circles-box .circle-two {

    opacity: 1;

}



.service-item .service-info {

    padding: 60px 20px 20px 20px;

    position: relative;

    top: -45px;

    transition-duration: 500ms;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}



.service-item:hover .service-info {

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}



.service-info .service-name {

    font-size: 20px;

    color: rgb(197 18 42);

    font-weight: bold;

    line-height: 28px;

}



.service-info .service-desc {

    margin: 0px;

}



/* domain */

.wrap-domian {

    padding: 50px 0px;

    /* background: #767676; */

}



.box-main-domain {

    display: flex;

    gap: 20px;

    margin-bottom: 50px;

}



.box-main-domain.eventt {

    display: flex;

    flex-direction: row-reverse;

}



.left-domain {

    width: 50%;

}



.domain-item {

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    border-radius: 40px;

    background-color: white;

    padding: 0.75rem;

    display: flex;

    justify-content: space-between;

    position: relative;

    cursor: pointer;



}



.domain-item span {

    z-index: 2;

}



.domain-item span:nth-child(2) {

    color: rgb(197 18 42);

    font-weight: 700;

}





.domain-item::before {

    position: absolute;

    content: "";

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-duration: 0.3s;

    transform: translate(0px, 0px) rotate(0deg) skewX(0deg) skewY(0deg) scaleX(0) scaleY(1);

    top: 0px;

    right: 0px;

    bottom: 0px;

    z-index: 0;

    background-color: rgb(197 18 42 / 10%);

    transform-origin: 50% 50%;



}



.domain-item:hover::before {

    content: "";

    /* transform: translate(0px, 0px) rotate(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1);

    transform: translate(0px, 0px) rotate(0deg) skewX(0deg) skewY(0deg) scaleX(0) scaleY(1); */

    transform: translate(0px, 0px) rotate(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1);

    width: 100%;



    height: 100%;



    border-radius: 40px;

}





.grid-domain {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.right-domain {

    width: calc(100% - 50%);

    text-align: center;

}



.title-domain h2 {

    color: rgb(197 18 42);

    font-size: 30px;

    line-height: 2.25rem;

    font-weight: bold;

    text-transform: uppercase;

}



.animate-border {

    position: relative;

    display: block;

    width: 115px;

    height: 3px;

    overflow: hidden;

    background-color: var(--c1);

    margin-bottom: 20px;

}



.animate-border:after {

    position: absolute;

    content: "";

    width: 35px;

    height: 3px;

    left: 15px;

    bottom: 0;

    border-left: 10px solid #fff;

    border-right: 10px solid #fff;

    -webkit-animation: animborder 2s linear infinite;

    animation: animborder 2s linear infinite;

}



.box-main-why-choice {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

}



.group-why-choice {

    padding: 50px 0px;

}



.why-choice-item {

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    padding: 2rem;

    text-align: center;

    transition-duration: 500ms;

    cursor: pointer;

}



.why-choice-item:hover {

    transition-duration: 500ms;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transform: translateY(-0.5rem);

}



.why-choice-title h3 {

    font-size: 20px;

    padding: 0.75rem 0px;

    font-weight: bold;

}



/* hosting */

.wrap-hosting {

    padding: 50px 0px;

    background: linear-gradient(180deg, rgba(252, 243, 244, 1) 0%, rgba(255, 255, 255, 1) 100%);

}



.hosting-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}



.nav-list {

    display: flex;

    gap: 5px;

    justify-content: center;

    align-items: center;

    background: white;

    padding: 0.5rem;

    width: fit-content;

    border-radius: 40px;

    margin: auto;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}



.nav-list-item {

    padding: 0.5rem 1.5rem;

    border-radius: 40px;

    cursor: pointer;



}



.nav-list-item.active,

.nav-list-item:hover {

    background: rgb(197 18 42);

    color: white;

}



.box-item-hosting {

    margin-top: 40px;

}



.grid-hosting {

    display: grid;

    grid-template-columns: repeat(3, 1fr);



}



.box-item-hosting {

    padding: 0px 100px;

}



.hosting-item {

    margin: 25px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}



.hosting-body-item {

    padding: 6rem 1rem 1rem 1rem;

}



.hosting-body-item table {

    border: none;

}



.hosting-body-item table {

    width: 100% !important;

}



.hosting-body-item table tbody tr {

    border-bottom: 1px dashed rgb(229 231 235);

    padding: 0.5rem 0rem;

}



.hosting-body-item table tbody tr td {

    padding: 0.75rem 0rem;

}



.hosting-body-item table tbody tr:last-child {

    border-bottom: 0px dashed rgb(229 231 235);

}



.hosting-header-item {

    text-align: center;

    padding: 25px 25px 100px 25px;

    position: relative;

}



.hosting-header-item h3 {

    color: white;

    font-size: 22px;

    font-weight: bold;

    position: relative;

}



.hosting-header-item h3::before {

    position: absolute;

    content: "";

    width: 50px;

    height: 4px;

    bottom: -10px;

    background: white;

    left: 50%;

    transform: translateX(-50%);

}



.hosting-price {

    position: absolute;

    width: 160px;

    height: 160px;

    border: 10px solid #319B23;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: white;

    border-radius: 50%;

    margin: auto;

    z-index: 1;

    left: 0px;

    right: 0px;

    bottom: -80px;

}



.hosting-price span:nth-child(2) {

    font-size: 20px;

    color: rgb(197 18 42);

    font-weight: 700;

}



.bgr-0 {

    background: #3FB130;

}



.bgr-0 .hosting-price {

    border: 10px solid #319B23;

}



.bgr-1 {

    background: #3EA199;

}



.bgr-1 .hosting-price {

    border: 10px solid #2B706B;

}



.bgr-2 {

    background: #E50073;

}



.bgr-2 .hosting-price {

    border: 10px solid #99004C;

}



.bgr-3 {

    background: #992D23;

}



.bgr-3 .hosting-price {

    border: 10px solid #7A241B;

}



.bgr-4 {

    background: #6666FF;

}



.bgr-4 .hosting-price {

    border: 10px solid #5151CC;

}



.bgr-5 {

    background: #9B59B6;

}



.bgr-5 .hosting-price {

    border: 10px solid #7C4791;

}



.bgr-6 {

    background: #0069D1;

}



.bgr-6 .hosting-price {

    border: 10px solid #004B97;

}


.bgr-7 {

    background: #2B706B;

}

.bgr-7 .hosting-price {

    border: 10px solid #3ea199;

}

.bgr-8 {

    background: #5151CC;

}

.bgr-8 .hosting-price {

    border: 10px solid #6666ff;

}

.box-main-loiich-hosting {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

}



.group-loiich-hosting {

    padding: 50px 0px;

}



.box-item-loiich-hosting {

    transition-duration: 500ms;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    padding: 2rem;

    text-align: center;

    cursor: pointer;

}



.box-item-loiich-hosting:hover {

    transform: translateY(-0.5rem);

}



.loiich-hosting-title h3 {

    font-size: 20px;

    font-weight: 700;

    margin: 0.75rem 0px;

}



/* website */

.wrap-website {

    background: rgb(197 18 42 / 5%);

}



.website-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    padding: 0px 100px;

}



.paging-website-category {

    margin-bottom: 20px;

}



.paging-website-category:last-child {

    margin-bottom: 0px;

}



.website-item {

    border: 1px solid;

    border-radius: 10px;

    background: white;

}



.website-title {

    text-align: center;

    font-size: 30px;

    padding: 1.25rem;

    margin: 0px;

    font-weight: bold;

}



.website-price {

    text-align: center;

    color: white;

    padding: 1.25rem;

}



.website-price span {

    font-size: 14px;

}



.website-price span:last-child {

    font-size: 30px;

    font-weight: 700;

    text-transform: uppercase;



}



.website-body-item {

    padding: 1rem 1.25rem;



}



.website-body-item table {

    border: none;

    width: 100% !important;

}



.website-body-item table tbody tr {

    border-bottom: 1px dashed rgb(229 231 235);

    padding: 0.5rem 0rem;

}



.website-body-item table tbody tr:last-child {

    border-bottom: 0px dashed rgb(229 231 235);

}



.website-body-item table tbody tr td {

    padding: 0.75rem 0rem;

}



.website-body-item table tbody tr td span {

    display: flex;

    align-items: center;

}



.boder-0 {

    border: 1px solid #3FB130;

}



.boder-1 {

    border: 1px solid #3EA199;

}



.boder-2 {

    border: 1px solid #E50073;

}



.color-0 {

    color: #3FB130;

}



.color-1 {

    color: #3EA199;

}



.color-2 {

    color: #E50073;

}





/* quy trình */

.wrap-process {

    padding-bottom: 50px;

    background: white;

    padding-top: 50px;
}



.title-main span {

    margin: auto;

    margin-bottom: 20px;

    font-weight: 700;

    color: var(--c1);

    font-size: 30px;

}



.title-main h3 {

    font-size: 30px;

    color: rgb(197 18 42);

    font-weight: 700;

}



.title-main p {

    width: 70%;

    margin: 10px auto;

}



.box-main-process {

    position: relative;

}



.box-main-process svg {

    position: absolute;

    top: 0px;

    z-index: 1;

}



.grid-process {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 100px;

    z-index: 2;

    position: relative;

}



.process-item:nth-child(1) {

    position: relative;

}



.process-item:nth-child(2) {

    position: relative;

}



.process-item:nth-child(3) {

    position: relative;

}



.process-item:nth-child(4) {

    position: relative;

}



.process-item:nth-child(5) {

    position: relative;

}



.process-cycle {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Giúp cắt hình ảnh thừa ngoài vòng tròn */
    background: white;
    cursor: pointer;
}

.process-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%; /* Đảm bảo container bên trong cũng là vòng tròn */
}

.process-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giúp hình ảnh vừa khít và không bị méo */
    border-radius: 50%; /* Đảm bảo hình ảnh bên trong cũng tròn */
}


.process-cycle::before {

    content: "";

    background: linear-gradient(90deg, var(--c1) 0%, var(--c2) 100%);

    position: absolute;

    transition-duration: 300ms;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    width: 0px;

    height: 0px;

    left: 0px;

    bottom: 0px;

    z-index: 1;

    border-radius: 50%;

}



.process-img {

    z-index: 2;

}



.process-name {

    z-index: 2;

    font-size: 20px;

    transition-duration: 300ms;

    margin-top: 0.5rem;

    text-align: justify;

    text-transform: capitalize;
    
    font-weight: 500;
}



.process-item:hover .process-cycle::before {

    width: 100%;

    height: 100%;

    transition-duration: 300ms;



}



.process-number {

    font-size: 50px;

    color: rgb(197 18 42);

    font-weight: 700;

    line-height: 50px;

    position: absolute;

    top: -50px;

    right: 5px;

}



.process-item:hover .process-cycle .process-name {

    transition-duration: 300ms;

    color: white;

}







.process-item:hover .process-number {

    animation: ringring 1s infinite ease-in-out;

}



.custom-path {

    fill: none;

    stroke: #919191;

    stroke-width: 2;

    animation: stroke 10s linear infinite;

}





.animate-stroke {

    animation: stroke 10s linear infinite;

}



/* ưu điểm */

.wrap-benefit {

    padding: 50px 0px;

}



.box-main-benefit {

    display: flex;

    gap: 40px;

}



.group-left-benefit {

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 50%;

}



.group-left-benefit .title-main {

    text-align: left;

}



.group-left-benefit .title-main h3 {

    font-size: 36px;

    font-weight: bold;

    line-height: 50px;

}



.group-right-benefit {

    width: calc(100% - 50%);

    display: flex;

    gap: 40px;

}



.info-benefit-left {

    width: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 40px;

}



.info-benefit-right {

    width: calc(100% - 50%);

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 40px;

}



.benefit-item {

    border-radius: 10px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    padding: 30px;

    transition-duration: 500ms;

    cursor: pointer;

}



.benefit-item:hover {

    transition-duration: 500ms;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transform: translateY(-0.5rem);

}



.benefit-item h3 {

    font-size: 16px;

    font-weight: bold;

    margin: 10px 0px;

}



.benefit-img {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

}



.info-benefit-left .benefit-item:nth-child(1) .benefit-img {

    background-color: rgb(134 239 172 / 20%);

}



.info-benefit-left .benefit-item:nth-child(2) .benefit-img {

    background-color: rgb(216 180 254 / 20%);

}



.info-benefit-right .benefit-item:nth-child(1) .benefit-img {

    background-color: rgb(253 186 116 / 10%);

}



.info-benefit-right .benefit-item:nth-child(2) .benefit-img {

    background-color: rgb(190 242 100 / 10%);

}



.info-benefit-right .benefit-item:nth-child(3) .benefit-img {

    background-color: rgb(249 168 212 / 10%);

}



/* Hỗ trợ */

.wrap-support {

    padding: 50px 0px;

    background: rgb(197 18 42 / 5%);

}



.title-main .title-support {

    color: rgb(55 65 81 / 80%);

    font-size: 36px;

    font-weight: 700;

}



.title-main .slogan-support {

    color: rgb(55 65 81 / 80%);

    font-size: 20px;

}



.group-support-hotline {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 50px;

    /* margin-bottom: 1.25rem; */

}



.group-support-hotline-number {

    display: flex;

    align-items: center;

    gap: 8px;

}



.group-support-hotline-number a {

    color: rgb(252 151 37);

    font-size: 30px;

    font-weight: bold;

}



.group-support-hotline-number i {

    color: rgb(252 151 37);

    font-size: 35px;

    font-weight: bold;

}



.group-support-info {

    text-align: center;

    background-color: rgb(197 18 42);

    width: fit-content;

    margin: 1.25rem auto;

    padding: 1.25rem 2rem;

    border-radius: 0.75rem;

}



.group-support-info p:nth-child(1) {

    color: white;

    font-size: 18px;

}



.group-support-info p:nth-child(2) {

    color: white;

    font-size: 30px;

    font-weight: bold;

}



.group-support-info p:nth-child(2) a {

    color: white;

    font-size: 30px;

    font-weight: bold;

}



.group-support-info p:nth-child(3) {

    color: white;

    font-size: 18px;

    margin: 0px;

}



/* care website */



.box-main-care-website {

    background: #ebf3fe;

    padding: 50px 0px
}



.none-mt {

    margin: 0px !important;

}



.title-care-website {

    font-size: 30px;

    color: rgb(220 53 69);

    font-weight: bold;

    margin-bottom: 20px;

}



.care-website-desc {

    background: white;

    padding: 2rem;

    border-radius: 1.5rem;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}



.care-website-content {

    padding: 50px 0px;

}



/* footer */

.footer-title {

    text-transform: uppercase;

    font-size: 18px;

    margin-bottom: 1rem;

    font-weight: 500;

    color: rgb(75 85 99);

    font-weight: bold;

}



.footer-news-box {

    padding: 40px 25px;

}



.footer-ul li a {}



.footer-news-box:nth-child(1) {

    border-right: 1px solid rgb(236 236 236);

    width: 23.33%;

}



.footer-news-box:nth-child(2) {

    border-right: 1px solid rgb(236 236 236);

    width: 23.33%;

}



.footer-news-box:nth-child(3) {

    border-right: 1px solid rgb(236 236 236);

    width: 23.33%;

}



.footer-news-box:nth-child(4) {

    width: 30%;

}



.footer-news-box:nth-child(4) .footer-title {

    color: rgb(197 18 42);

    font-size: 22px;

}


.footer-news:nth-child(4) {

    width: 25%;

    padding: 2rem 30px 0px 30px;

    display: flex;

    flex-direction: column;
    
    font-size: 15px;
}

.footer-news:nth-child(3) {

    width: 25%;

    padding: 2rem 30px 0px 30px;

    display: flex;

    flex-direction: column;

}



.footer-news:nth-child(2) {

    width: 50%;

    padding: 2rem 30px 0px 30px;

    color: var(--color-white);


    font-weight: bold;

    font-size: 15px;

    text-align: justify;

}



.footer-news:nth-child(1) {

    width: 50%;

    padding: 2rem 30px 0px 30px;

    color: var(--color-white);

    font-weight: bold;

    font-size: 20px;

    text-align: justify;


}

.footer-container {
    background-color: var(--c1);
    color: #fff;
    font-family: Arial, sans-serif;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-section {
    flex: 1;
    margin: 0 20px;
}

.footer-section h3 {
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.contact-item .contact-icon {
    font-size: 20px;
    margin-right: 10px;
    width: 32px;
    text-align: center;
    border: 1px solid #fff;
    padding: 5px;
    border-radius: 5px;
}

.contact-item p {
    margin: 0;
    font-size: 14px;
}

.social-media {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.social-icon {
    background-color: #fff;
    color: var(--c1);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: bold;
}





.view-introduce a {

    color: rgb(197 18 42);

    font-size: 14px;

    padding: 8px 15px;

    border-radius: 40px;

    border: 1px solid rgb(197 18 42);

    display: flex;

    align-items: center;

    width: fit-content;

    transition-duration: 300ms;

}



.view-introduce:hover a {

    background: rgb(197 18 42);

    color: white;

    transition-duration: 300ms;

}



.view-introduce:hover a svg {

    margin-left: 0.5em;

    transition-duration: 300ms;

}



.footer-news .footer-title {

    color: white;

}



/* giới thiệu */

.wrap-gioithieu {

    padding: 50px;

}



.box-main-gioithieu {

    display: flex;

    gap: 20px;

}



.info-gioithieu {

    width: 50%;

}



.img-gioithieu {

    width: 50%;

}



span.tieudesub {

    display: block;

    font-size: 20px;

    color: #3d3d3d;

    text-transform: uppercase;

    font-family: 'font1';

    font-weight: normal;

    overflow: hidden;

    height: 30px;

}



span.tieude {

    display: block;

    font-family: 'font2';

    font-size: 33px;

    color: #c35f0f;

    text-transform: uppercase;

}



.desc-gioithieu {

    font-family: 'font4';

    font-size: 15px;

    color: #424242;

    text-align: justify;

    line-height: 25px;

    margin-top: 8px;

    margin-bottom: 20px
}



/* sản phẩm */

.box-main-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.pic_sanpham {

    position: relative;

    overflow: hidden;

    display: block;

    border: 1px solid #ccc;

    border-radius: 8px;

}



.product-info h3 {

    font-size: 16px;

    color: #393939;

    text-transform: capitalize;

    display: block;

    font-weight: normal;

    text-align: center;

    margin-top: 15px;

    margin-bottom: 6px;

    line-height: 20px;

    overflow: hidden;

    font-family: 'font1';

    height: 20px;

    padding: 0px 15px;

}







/* liên hệ chúng tôi */

.wrap-contact {

    background: #c0031b;

    padding: 15px 0px;

    color: white;

}











/* đăng kí nhận tin */

.wrap-dankynhantin {

    background: url(../imgs/bgr_dangky.png) no-repeat center;

    background-size: 100% 100%;

    padding: 50px 0px;

}



.box-main-dangky {

    background: rgba(30, 142, 0, 0.8);

    padding: 35px 42px;

    border: 1px solid #87c377;

}



.group-newsletter {

    display: flex;

    gap: 30px;

    position: relative;

}



.group-newsletter .col-group:nth-child(1) {

    width: calc(33.33% + 33.33%);

    display: flex;

    gap: 30px;

}





.group-newsletter .col-group:nth-child(3) {

    width: 33.33%;

    background: white;

    position: relative;

}



.group-newsletter .col-group:nth-child(3) .input-group {



    position: relative;

    z-index: 5;

    min-height: 131px;

    border: 1px #fff solid;

    float: left;

    padding: 0px 7px;

    background: #fff;

}



.col-group-text {

    width: 50%;

}



.col-group-text .input-group {

    margin-bottom: 30px;

}



.input-group input {

    font-size: 13px;

    width: 100%;

    padding: 5px;

    background: #fff;

    box-sizing: border-box;

    border: 1px solid #fff;

    min-height: 36px;

    position: relative;

    z-index: 8;

    font-family: 'font1';

    text-indent: 10px;

    color: #464646;

}



.input-group textarea {

    font-size: 13px;

    width: 100%;

    padding: 5px;

    color: #464646;

    background: transparent;

    font-family: 'font1';

    box-sizing: border-box;

    min-height: 75px;

    max-height: 75px;

    resize: none;

    float: left;

    margin-top: 8px;

    border: 0px;



}





/* .input-group textarea {

    position: relative;

    z-index: 5;

    min-height: 131px;

    border: 1px #fff solid;

    float: left;

    padding: 0px 7px;

    background: #fff;

} */

input.btn_dk {

    float: right;

    display: inline-block;

    position: absolute;

    bottom: 0px;

    right: 6px;

    padding: 8px 27px;

    background: #a3510f;

    color: #fff;

    font-family: 'font3';

    font-size: 15px;

    text-transform: uppercase;

    border-radius: 5px !important;

    width: auto !important;

    text-indent: 0px;

}



.info-form {

    display: flex;

    position: absolute;

    bottom: -5px;

    width: calc(33.33% + 33.33% - 20px);

    left: 0px;

    justify-content: space-between;

}



.info-form p {

    font-size: 14px;

    color: white;

    font-family: "font1";

}



/*  */





.logo {

    position: relative;

}



.slick-youtube {

    width: 60%;

    z-index: 2;

    left: -100px;

}



.operation {

    width: 50%;

    height: 170px;

    display: flex;

    background: #c0031b;

    position: absolute;

    right: 0px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1;

    padding-left: 80px;

}



.operation .title-video {

    font-size: 50px;

    color: white;

    font-weight: bold;

    padding: 0px 20px;

}



.slick-youtube .slick-prev:before {

    display: none
}



.slick-youtube .slick-next:before {

    display: none
}



.slick-youtube .slick-prev {



    right: -34%;

    top: 60%;

    left: unset;

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-prev img {

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-next {

    right: -40%;

    top: 60%;



    left: unset;

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-next img {

    width: 50px;

    height: 50px;

}









/*xem thêm */

.button {

    position: relative;

    transition: all 0.3s ease-in-out;

    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

    padding-block: 0.5rem;

    padding-inline: 1.25rem;

    background-color: #01a0e4;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffff;

    gap: 10px;

    border: 3px solid #01a0e4;

    outline: none;

    overflow: hidden;

    font-size: 15px;

    cursor: pointer;

}



.icon {

    width: 24px;

    height: 24px;

    transition: all 0.3s ease-in-out;

}



.button:hover {

    transform: scale(1.05);

    border-color: #01a0e4;

}



.button:hover .icon {

    transform: translate(4px);

}



.button:hover::before {

    animation: shine 1.5s ease-out infinite;

}



.button::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100%;

    background-image: linear-gradient(120deg,

            rgba(255, 255, 255, 0) 30%,

            rgba(255, 255, 255, 0.8),

            rgba(255, 255, 255, 0) 70%);

    top: 0;

    left: -100px;

    opacity: 0.6;

}



@keyframes shine {

    0% {

        left: -100px;

    }



    60% {

        left: 100%;

    }



    to {

        left: 100%;

    }

}





/*  */

.quick_contact {

    position: fixed;

    bottom: 50px;

    left: 60px;

    z-index: 20;

}



.quick_contact a {

    display: block;

    position: relative;

    font-size: 18px;

    color: #fff;

    padding: 0 20px 0 35px;

    height: 44px;

    line-height: 44px;

    text-decoration: none;

    border-radius: 0 40px 40px 0;

}



.quick_contact a span {

    display: flex;

    width: 45px;

    height: 45px;

    line-height: 40px;

    border-radius: 50%;

    text-align: center;

    position: absolute;

    left: -25px;

    /* color: #2E8B57; */

    top: -2.5px;

    border: solid 5px #fc0;

    align-items: center;

    justify-content: center;

}



.button_gradient {

    background-image: linear-gradient(90deg, #2E8B57 0%, #2E8B57 100%);

    border: 2px #fff solid;

}



.contact-phone {

    float: left;

    width: 100%;

    text-align: center;

    color: white;

    font-size: 20px;

    line-height: 1.2;

    font-family: 'font1';

    line-height: 45px;

    animation-duration: 800ms;

    animation-name: chopchop;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    line-height: 40px;

}



.quick_contact a span:before {

    content: "";

    position: absolute;

    top: -30px;

    left: -27px;

    width: 95px;

    height: 95px;

    background: url(../imgs/contact_rotate.png) center no-repeat;

    animation: rotate 3s linear infinite;

}





.quick_contact2 {

    position: fixed;

    bottom: 150px;

    left: 60px;

    z-index: 20;

}



.quick_contact2 a {

    display: block;

    position: relative;

    font-size: 18px;

    color: #fff;

    padding: 0 20px 0 35px;

    height: 44px;

    line-height: 44px;

    text-decoration: none;

    border-radius: 0 40px 40px 0;

}



.quick_contact2 a span {

    display: flex;

    width: 45px;

    height: 45px;

    line-height: 40px;

    border-radius: 50%;

    text-align: center;

    position: absolute;

    left: -25px;

    /* color: #2E8B57; */

    top: -2.5px;

    border: solid 5px #fc0;

    align-items: center;

    justify-content: center;

}



.quick_contact2 a span:before {

    content: "";

    position: absolute;

    top: -30px;

    left: -27px;

    width: 95px;

    height: 95px;

    background: url(../imgs/contact_rotate.png) center no-repeat;

    animation: rotate 3s linear infinite;

}



@-webkit-keyframes rotate {



    from {



        -webkit-transform: rotate(0deg);



        transform: rotate(0deg)
    }







    to {



        -webkit-transform: rotate(360deg);



        transform: rotate(360deg)
    }



}



@keyframes rotate {



    from {



        -webkit-transform: rotate(0deg);



        -moz-transform: rotate(0deg);



        -ms-transform: rotate(0deg);



        transform: rotate(0deg)
    }







    to {



        -webkit-transform: rotate(360deg);



        -moz-transform: rotate(360deg);



        -ms-transform: rotate(360deg);



        transform: rotate(360deg)
    }



}



@keyframes chopchop {

    0% {

        transform: scale(1);

        color: #fff;

    }



    50% {

        transform: scale(1.1);

        color: #ec2d3f;

    }



    100% {

        transform: scale(1);

        color: #fc0;

    }

}



/* liên hệ chúng tôi */

.group-contact {}

.group-form {
    display: flex;
    gap: 20px;
}


.info-contact h3 {

    font-size: 30px;

    margin: 0px;

    font-family: 'font4';

}



.info-contact p {

    margin: 0px;

    font-family: 'font1';

}



.name-product:hover {

    color: #fc0;

    transition: 0.7s;

}





/* From Uiverse.io by xetrov47 */

.search {

    display: flex;

    align-items: center;

    text-align: center;

    border-radius: 5px;

}



.search__input {

    font-family: inherit;

    font-size: inherit;

    border: 1px solid #767676;

    color: #767676;

    padding: 5px 10px;

    border-radius: 4px;

    margin-right: -1.5rem;

    height: 30px;

    width: 15rem;

}



.search__input::-webkit-input-placeholder {

    font-weight: 400;

    color: #767676;

    font-size: 14px;

}



.search__button {

    border: none;

    background-color: #fff;

    margin-top: 0.1em;

}



.search__button:hover {

    cursor: pointer;

}



.search input:focus {

    outline: none;

}



.line {

    background: #af5600;

    width: 200px;

    height: 0.5px;

    margin: auto;

}



/*  */

.box-album:after {

    content: '';

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    /* cursor: pointer; */

    pointer-events: none;

    /* background: rgba(0, 0, 0, .5); */

}



.slider {

    position: relative;

    z-index: 200;

    padding: 0 0px;

    margin: 5rem auto;

    max-width: 800px;

    width: 100%;

}



.box-album .slick-arrow {

    position: absolute;

    top: 50%;

    width: 40px;

    height: 50px;

    line-height: 50px;

    margin-top: -25px;

    border: none;

    background: transparent;

    color: #fff;

    font-family: monospace;

    font-size: 5rem;

    z-index: 300;

    outline: none;

}



.box-album .slick-prev {

    left: -50px;

    text-align: left;

    display: none;

}



.box-album .slick-next {

    right: -50px;

    text-align: right;

    display: none;

}







.box-album .item.slick-slide {

    width: 400px;

    height: 400px !important;

    transition: transform .5s ease;

    position: relative;

}



.box-album .slick-slide:after {

    content: '';

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, .5);

    transition: transform .4s;

}



.box-album .item.slick-slide {

    transform: scale(0.7) translate(640px);

}



.box-album .item.slick-slide.slick-center+.slick-slide {

    transform: scale(0.8) translate(-250px);

    z-index: 10;

}



.box-album .item.slick-slide.slick-center+.slick-slide+.item.slick-slide {

    transform: scale(0.7) translate(-640px);

    z-index: 5;

}



.box-album .item.slick-slide.slick-active {

    transform: scale(0.8) translate(250px);

}



.box-album .item.slick-slide.slick-center {

    /* margin: 0 -10%; */

    transform: scale(1);

    z-index: 30;



}



.box-album .slick-center:after {

    opacity: 0;

    margin: 10px;

    padding: 10px;

    /* border: 10px solid white; */

}



.box-album .slick-center {

    border: 10px solid white;

}



/* map */

.footer_map_tab {

    position: relative;

}



.flex_mapaa {

    display: flex;

}



.wrap_map {

    position: absolute;

    top: 0px;

    transform: translateX(-50%);

    left: 50%;

}



.map_frame iframe {

    width: 100%;

}



.map_items {

    background: white;

    width: 200px;

    height: auto;

}



.map_items.active {

    background: #007e06;

    color: white;

}



.txt-white {

    color: white !important;

}



.bgr-white {

    background: white !important;

}



/* doamin_tpl */

.table-domain {

    background-color: rgb(237 183 191);

    padding: 15px 0px;

    margin: 50px 0px;

}



.table-domain table {

    border: none;

}



.table-domain table thead tr th:nth-child(1) {

    background-color: transparent;

    color: rgb(197 18 42);

    font-size: 20px;

    text-transform: uppercase;

    /* padding-bottom: 20px; */
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 10px;

}



.table-domain table thead tr th:nth-child(2) {

    background-color: rgb(219 60 81);

    text-align: center;

    color: white;

}



.table-domain table thead tr th:nth-child(3) {

    background-color: rgb(219 60 81);

    text-align: center;

    color: white;



}



.table-domain table thead tr th:nth-child(4) {

    background-color: rgb(219 60 81);

    text-align: center;

    color: white;



}



.table-domain table thead tr th {

    border: none;

    border-left: 10px solid rgb(237 183 191);

    border-right: 10px solid rgb(237 183 191);



}



.table-domain table thead tr th span {

    font-style: italic;

    font-weight: normal;

    font-size: 12px;

}



.table-domain table tbody tr td:first-child {

    text-align: left;

    font-size: 18px;

}



.table-domain table tbody tr td:nth-child(2) {

    font-weight: bold;

}



.table-domain table tbody tr td {

    border: none;

    border-left: 10px solid rgb(237 183 191);

    border-right: 10px solid rgb(237 183 191);

    padding: 15px;

    text-align: center;

}



.table-domain table tbody tr:nth-child(even) {

    /* background-color: rgb(250 237 239); */

    background-color: rgb(250 237 239);

}



.table-domain table tbody tr:nth-child(odd) {

    background-color: white;

}



/*  */

.box-main-design-website {

    background-color: rgb(197 18 42 / 5%);

    padding-bottom: 50px;

}



.design-website-slider {

    display: flex;

    align-items: center;

    gap: 30px;

}



.design-website-slider-left {

    width: 50%;

}



.design-website-slider-left h2 {

    color: rgb(197 18 42);

    font-size: 38px;

    font-weight: 700;

}



.design-website-slider-left p {

    font-size: 20px;

    color: rgb(55 65 81);

}



.design-website-slider-right {

    width: calc(100% - 50%);

}



/* animate */

@keyframes rotateme {

    0% {

        transform: rotate(0.0deg);

    }



    100% {

        transform: rotate(360.0deg);

    }

}



.animate-rotateme {

    animation: rotateme 20s linear infinite;

}



@keyframes animborder {

    0% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }



    100% {

        -webkit-transform: translateX(113px);

        transform: translateX(113px);

    }

}



@keyframes ringring {

    0% {

        transform: rotate(0) scale(1) skew(1deg);

    }



    10% {

        transform: rotate(-25deg) scale(1) skew(1deg);

    }



    20% {

        transform: rotate(25deg) scale(1) skew(1deg);

    }



    30% {

        transform: rotate(-25deg) scale(1) skew(1deg);

    }



    40% {

        transform: rotate(25deg) scale(1) skew(1deg);

    }



    50% {

        transform: rotate(0) scale(1) skew(1deg);

    }



    100% {

        transform: rotate(0) scale(1) skew(1deg);

    }

}



@keyframes stroke {

    0% {

        stroke-dasharray: 15.0406, 15.0406;

        stroke-dashoffset: 600;

    }



    100% {

        stroke-dasharray: 15.0406, 15.0406;

        stroke-dashoffset: 0;

    }

}

/* why */
.group-why-email-server {
    padding: 50px 0px;
}

.group-why-email-server .wrap-content {
    gap: 50px;
}

.why-email-server-left {
    width: 35%;
}

.why-email-server-right {
    width: calc(100% - 35%);
}

.why-email-server-box {
    background: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.why-email-server-title {
    margin: 0px;
}

.why-email-server-title a {
    font-size: 16px;
    font-weight: bold;
    color: black;
}

.accordion-button:focus {
    color: rgb(197 18 42);
}

.why-email-server-content {
    margin-top: 10px;
}

.why-email-server {
    color: rgb(197 18 42);
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;


}

.why-email-server-left img {
    display: flex;
    justify-content: center;
}

/* contact */
.group-contact {
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 30px 30px 200px 30px;
    margin: 0px 220px;
    position: relative;
    margin-bottom: 400px;
}

.box-contact-left {
    width: 50%;
}

.box-contact-right {
    width: calc(100% - 50%);
    border: 1.5px solid lightgrey;
    border-radius: 5px;
    padding: 15px;
    height: fit-content;

}

/* From Uiverse.io by ErzenXz */
textarea.input {
    width: 100%;
    height: 100px;
    padding: 12px;
    border-radius: 5px;
    border: 1.5px solid lightgrey;
    outline: none;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0px 0px 20px -18px;
}

.input {
    width: 100%;
    height: 45px;
    padding: 12px;
    border-radius: 5px;
    border: 1.5px solid lightgrey;
    outline: none;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0px 0px 20px -18px;
}

.input:hover {
    border: 2px solid lightgrey;
    box-shadow: 0px 0px 20px -17px;
}

.input:active {
    transform: scale(0.95);
}

.input:focus {
    border: 2px solid grey;
}

.contact-input {
    margin-bottom: 10px;
}

input.gr_btniconsubmit {
    border-radius: 20px;
    background: rgb(197 18 42);
    padding: 7px 15px;
    color: white;
    border: 1px solid rgb(197 18 42);
}

/*  */
.taisao-care-website {
    padding: 50px 0px;
}

.box-main-taisao-care-website {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.taisao-care-website-item {
    display: flex;
    gap: 10px;
    padding: 20px 40px;
}

.taisao-care-website-item:nth-child(1) {
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.taisao-care-website-item:nth-child(2) {
    border-bottom: 1px solid #dee2e6;
}

.taisao-care-website-item:nth-child(3) {
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.taisao-care-website-item:nth-child(4) {
    border-right: 1px solid #dee2e6;
}

.taisao-care-website-item:nth-child(5) {
    border-right: 1px solid #dee2e6;
}


.taisao-care-website-img {
    width: 80px;
}

.taisao-care-website-info {
    width: calc(100% - 80px);
}

/*  */
.step-care-website {
    background: #ebf3fe;
    padding: 50px 0px;
}

.box-main-step-care-website {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.step-care-website-img {
    background: rgb(220 53 69);
    border-radius: 100px;
    position: relative;
    padding: 15px 10px 15px 115px;
    margin-right: 60px;
    margin-top: 40px;
}

.step-care-website-img img {
    position: absolute;
    top: -40px;
    left: 20px;
}

.step-care-website-img h3 {
    color: white;
    font-size: 16px;
    margin: 0px;
}

.step-care-website-info {
    background: white;
    border-radius: 10px;
    margin-top: 20px;
    position: relative;
}

.step-care-website-info::after {
    content: '';
    position: absolute;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
    border-left: 20px solid transparent;
    top: -40px;
    width: 40px;
    left: 40px;
    margin: auto;
}


.step-care-website-info p {
    padding: 30px;
    margin: 0px;

}

/*  */
.line-hotline-fix {
    height: 55px;
    width: 100%;
    background: rgb(189 0 25);
    position: fixed;
    bottom: 0px;
    z-index: 9999;
    display: none;
    justify-content: space-between;
}

.hotline-item {
    padding: 10px;
    display: none;
    gap: 7px;
    align-items: center;
}

.hotline-item i {
    font-size: 30px;
    color: white;
}

.hotline-item h3 {
    font-size: 15px;
    color: white;
    font-weight: bold;
    margin: 0px;
}

.hotline-item p {
    font-size: 14px;
    color: white;
    margin: 0px;
}

.title-tintuc {
    font-size: 35px;
    font-weight: bold;
    color: blue;
    font-family: system-ui;
}

.title-tintuc-p {
    font-size: 16px;
    font-weight: bold;
    color: blue;
}

.blockquote-tintuc {
    border-left: 5px solid yellow;
    font-family: system-ui;
    font-style: normal;
    color: black;
}

.project-container {
    display: flex;
    align-items: center; 
    gap: 40px; 
    max-width: 1400px;
    width: 100%;
    padding: 30px;
    margin: 3px auto 40px;

}

.carousel-column {
    flex: 0 0 60%; 
    max-width: 60%;
}

.project-title {
    flex: 1;
    padding-left: 20px;
}




.owl-carousel .item img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

/* Tùy chỉnh nút dots */
.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--c1); 
}