:host, :root {
    --spacing: .25rem;
    --breakpoint-md: 48rem;
    --breakpoint-2xl: 96rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: 1.33333;
    --text-sm: .875rem;
    --text-sm--line-height: 1.42857;
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.55556;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.4;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.33333;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 1.11111;
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-xs: 0 1px 1px #0000000d;
    --drop-shadow-md: 0 3px 3px #0000001f;
    --ease-in: cubic-bezier(.4,0,1,1);
    --ease-out: cubic-bezier(0,0,.2,1);
    --ease-in-out: cubic-bezier(.4,0,.2,1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0,0,.2,1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
    --default-font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
    --default-font-feature-settings: normal;
    --default-font-variation-settings: normal;
    --default-mono-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    --default-mono-font-feature-settings: normal;
    --default-mono-font-variation-settings: normal;
}
a, .nav-link{
	color: #db4b4b;
}
.shake {
    animation: shake 1s infinite;
    transform-origin: center;
    display: inline-block;
}

@keyframes shake {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-15deg); }
    40%  { transform: rotate(15deg); }
    60%  { transform: rotate(-10deg); }
    80%  { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}
.readmore, a .kiosk-points-item-details h3, a .kiosk-points-item-details .h3{
	color: #03a9f4;
}

a:hover{
	color: #03a9f4;
}

.hero h1, .hero .h1, h1, .h1{
    font-size: calc(1.3875rem + .5vw);
}

h2, .h2{
    font-size: calc(1.3875rem + .4vw) !important;
}
@media (max-width: 768px) {
    .container {
        padding: 0 0.8rem !important;
    }

    .container.blog .seth{
        height: 90px !important;
    }
}

h3, .h3{
    font-size: calc(1.3875rem);
}
.blog-details img{
    margin: 10px !important;
}
.blog-details ul li{
    padding-left: 2rem;
}
.blog-details ul li p{
    margin-bottom: 0.5 rem;
}
.thumb{
	border-radius: 10px;
}
.horzScrollShadows {
    background: 0 / 16px 100% local no-repeat linear-gradient(to right, var(--main-surface-primary) 50%, #0000), 0 / 8px 100% scroll no-repeat radial-gradient(farthest-side at 0 50%, #00000026, #0000), 100% / 16px 100% local no-repeat linear-gradient(to left, var(--main-surface-primary) 50%, #0000), 100% / 8px 100% scroll no-repeat radial-gradient(farthest-side at 100% 50%, #00000026, #0000);
}
.highlight {
  background-color: #f3f4f6;
  padding: 20px;
  border-left: 5px solid #1e40af;
  margin: 20px 0;
}


.cta {
  background-color: #1e40af;
  color: white;
  text-align: center;
  padding: 25px;
  font-size: 1.2em;
  border-radius: 8px;
}
.cta a {
  color: #ffeb3b;
  font-weight: bold;
  text-decoration: none;
}
.tableContainer {
    box-sizing: content-box;
    max-width: min(100%, 2 * var(--thread-content-max-width));
    min-width: min(100cqw - 2 * var(--thread-content-margin), var(--thread-content-max-width));
    overflow-x: auto;
    padding-inline: var(--thread-content-margin);
    width: 100%;
}
table {
    --tw-border-spacing-x: calc(var(--spacing) * 0);
    --tw-border-spacing-y: calc(var(--spacing) * 0);
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    margin: calc(var(--spacing) * 0);
}
#product-detail .mySwiper .swiper-slide{
    margin-right: 10px !important;
    padding: 0px !important;
}
#product-detail .mySwiper .swiper-slide-active img{
    border: 2px solid red;
    border-radius: 5px;
}
.row{
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.content ul{
    padding-left: 15px !important;
}
.content ul li p{
    font-size: 1rem !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
}
#product-detail .swiper-slide-active{
    transform: scale(1) !important;
}
.hero-inner #tv-container{
    background: none !important;
}
.product.all-case-study .card picture img{
    object-fit: contain;
}
.product.all-case-study .card-title {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .5rem 0;
}
.product.all-case-study .card{
    margin-bottom: 0;
    border-radius: 15px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .1), 0 2px 6px 2px rgba(60, 64, 67, .15);
    padding: 7px;
    min-height: auto;
    margin-bottom: 3rem;
}
.product .card-head-category {
    width: 100px;
    background: #ffc107bd;
    position: absolute;
    font-size: .9rem;
    right: 0;
    padding: .5rem 0 .5rem 1rem;
    border-radius: 100px 0 0 100px;
}
.recentPost .text-area .date-time p {
    font-size: 0.8rem !important;
}
/* Lớp chính: table.min-w-full */
table.min-w-full {
    min-width: 100%;
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.875rem; /* tương đương text-sm */
    color: #374151; /* text-gray-700 */
}

/* Header */
table.min-w-full thead {
    background-color: #f9fafb; /* bg-gray-100 */
}

table.min-w-full thead th {
    padding: 0.75rem 1rem;       /* tương đương px-4 py-3 */
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;              /* text-gray-900 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
    white-space: nowrap;
}

/* Body */
table.min-w-full tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

/* Hover row */
table.min-w-full tbody tr:hover {
    background-color: #f3f4f6; /* hover:bg-gray-100 */
}

/*---------------*/
.content table {
    min-width: 100%;
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.875rem; /* tương đương text-sm */
    color: #374151; /* text-gray-700 */
}

/* Header */
.content table thead {
    background-color: #f9fafb; /* bg-gray-100 */
}

.content table thead th {
    padding: 0.75rem 1rem;       /* tương đương px-4 py-3 */
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;              /* text-gray-900 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
    white-space: nowrap;
}

/* Body */
.content table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

/* Hover row */
.content table tbody tr:hover {
    background-color: #f3f4f6; /* hover:bg-gray-100 */
}

.blog-list .date-time, .recentPost .date-time, .image .date-time{
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 0.7rem !important;
    font-weight: 600;
    background: #000000bf;
    display: flex;
    padding: 0px 5px;
    border-radius: 5px;
    color: #fff;
    white-space: nowrap;
}
.recentPost .text-area{
    padding: 6px !important;
}
.recentPost .image{
    position: relative;
}
.blog-list .date-time p, .recentPost .date-time p, .image .date-time p{
    color: #fff;
}
.blog-list .date-time span{
    padding: 0px 5px;
}
/* Responsive table wrapper */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .recentPost .text-area .date-time p {
        font-size: 0.8rem !important;
        white-space: nowrap;
    }
}
.recentPost .text-area h3 {
    color: #000 !important;
    font-size: 1rem !important;
    font-weight: 500;
    line-height: 1.3rem !important;
}
.breadcrumb{
    overflow: auto;
}
.breadcrumb-item{
    white-space: nowrap;
    font-size: 0.8rem
}
@media (max-width: 768px) {
    .devider {
        width: 0;
        height: 30px;
        display: none;
    }
}
ol.breadcrumb-item{

}
.product .heading{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;

}
.img-hover {
    transition: transform 0.3s ease-in-out;
}
.all-case-study.product .case-study-search .filters{
    align-items: center;
    justify-content: space-around;
}
.all-case-study.product .case-study-search .filters img{
    border-radius: 50%;
    object-fit: cover;
}
.all-case-study .case-study-search .filters ul {
    flex-wrap: wrap;
    justify-content: space-between;
}
.product .card-head-icon{
    background: url('/assets/img/promotion.svg') no-repeat;
    height: 31px;
    left: -5px;
    position: absolute;
    top: 20px;
    width: 80px;
    z-index: 10;
}

.product .card-head-icon span{
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin: 5px 0 0;
    text-align: center;
    width: 100%;
    padding-left: 5px;
}
.banner h1 {
    font-size: 2rem !important;
    font-weight: 700;
    margin-bottom: 8px;
}
.header .wrapper .header-item-center .menu .menu-section .menu-item-has-children .menu-subs{
    background-image: none !important;
}
.blog-list .text-area .date-time{
    text-transform: none !important;
}
.cta-full-screen a{
/*    color: #fff !important;*/
}
@media (min-width: 992px) {
    .pagination {
        display: flex !important;
    }
}
@media (min-width: 992px) {
    .numberlist, .next-last {
        width: auto;
    }
}
@media (min-width: 992px) {
    .numberlist, .next-last {
        width: auto;
    }
}
.page-item {
    margin: .5rem;
    float: left;
}
ul li, .normal-list-abc li, .normal-list-dots li:nth-last-child(1) {
    padding: 0;
}
.page-item:first-child .page-link, .page-item:last-child .page-link {
    border-radius: 100rem !important;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #fd0036;
    box-shadow: 0 22px 40px -17px #f5140652;
    border-color: #fd0036;
}

.page-link {
    padding: .6rem 1.1rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #0f141e;
    font-size: .9rem;
    background-color: #fff;
    border-radius: 100rem;
    border: 1px solid #dee2e6;
}

ul li, .normal-list-dots li {
    font-size: 1.125rem;
    font-weight: 300 !important;
    padding-bottom: 10px !important;
    color: #292929 !important;
}

.numberlist, .next-last {
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.numberlist, .next-last {
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.blog .blog-tags, .image .blog-tags{
    position: absolute;
    bottom: 17px;
    left: 1px;
}
.blog-list .text-area h3{
    margin-bottom: 10px !important;
}
.heading .text .under-line {
    width: 40px;
    height: 5px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0) linear-gradient(90deg, #dd154d 0%, #fd0036 50%, #ff5100 100%) 0% 0% no-repeat padding-box;
}
.blog .heading{
    display: flex;
    justify-content: space-between;
}
.pagination {
    display: inline;
    list-style: none;
    border-radius: 1rem;
    margin: 20px 0;
    padding: 0;
    justify-content: center;
}
.table-of-contents{
    top: 15% !important;
}
.table-of-contents .tocBlock{
    max-height: 50vh !important;
}
.blog-image{
    display: flex !important;
}
.blog-image img{
    max-height: 400px;
    object-fit: fill;
    max-width: 100%;
    border-radius: 20px;
    padding: 10px;
    margin: 0px auto;
}

.blog a{
    color: #03a9f4;
}
.cta-full-screen{
    padding: padding: 3rem 1.875rem !important;
}
.author-bio .author-info {
    width: calc(100%) !important;
}

.blog h1{
    font-size: 1.4rem !important;
    margin-bottom: 0px !important;
}

.blog .text-white, .blog-image h1{
    color: #fff !important;
}

@media (max-width: 768px) {
    .blog{
        padding: 0px !important;
    }
    .social-share {
        flex-direction: column;
        padding: 1rem 0 !important;
    }
    .blog-details h1 {
        font-size: 1.2rem !important;
        line-height: 1.2em !important;
        text-transform: capitalize;
        font-weight: 450 !important;
        margin-bottom: 15px !important; 
    }
    .blog-image{
        margin-top: -15px !important;
    }
    
    .featurepost .text-area > div{
        display: flex;
        justify-content: space-between;
        align-content: space-around;
        align-items: flex-start;
    }

    .author-readtime .author {
        flex-direction: row;
        color: #9397ad;
        justify-content: flex-end;
    }
}
@media (min-width: 992px) {
    .banner h1 {
        font-size: 2.5rem !important;
    }
}

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

.kiosk-section .kiosk-points-item img{
	width: 200px;
}

.blog-list .text-area h3 {
    font-size: 1.1rem !important;
    line-height: 1.2em !important;
}

.blog-list .text-area p{
    line-height: 1.2rem !important;
}

.cta-new .number-item:nth-child(2){
	padding: 0; 
    border-left: none; 
    border-right: none;
}
.featurepost .image figure img{
    border-radius: 10px;
}
@media (min-width: 768px) {
    .featurepost .image {
        width: 55% !important;
        height: 20rem;
    }
}

.main-widget {
    position: fixed;
    z-index: 1000;
    top: auto !important;
    right: 20px;
    bottom: 90px
}

.main-widge .img svg {
    width: 100%;
    height: 100%
}

.main-widget .img {
    width: 25px;
    height: 25px
}

.main-icon svg {
    width: 20px;
    height: 20px;
    fill: #fff;
    margin-bottom: 5px
}

.main-icon p {
    font-size: 1rem;
    color: #fff;
    margin: 0px
}

.out-circle {
    overflow: hidden;
    padding: 17px;
    border-radius: 100%;
    background: #4b4b4c;
    width: 60px;
    height: 60px
}

.main-icon {
    line-height: 0;
    color: #fff;
    width: 100%;
    height: 32px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.main-icon i {
    width: 26px;
    height: 26px;
    transform: translateX(2px)
}

.ser-icon {
    display: inline-flex;
    position: absolute;
    font-size: 30px;
    top: 0;
    left: 0;
    padding: 10%;
    background: #fff;
    max-width: 100%;
    overflow: hidden;
    border-radius: 100%;
    color: #4b4b4c;
    width: 70%;
    height: 70%;
    margin: 15%;
    transition: .2s all;
   	cursor: pointer;
}

.unsee {
    opacity: 0;
    transform: scale(0)
}

.process {
    display: inline-flex;
    transform: translateX(0px);
    transition: 0.15s linear transform;
    line-height: 0
}

.ser-icon .item {
    margin-right: 40px;
    width: 30px;
    height: 30px;
    color: #4b4b4c;
    display: flex;
    justify-content: center;
    align-items: center
}

.ser-icon .item svg {
    width: 25px;
    height: 25px;
    color: #4b4b4c
}

.ser-icon i:nth-child(2n) {
    color: #000
}

.def-content {
    position: absolute;
    bottom: 62px;
    right: 0;
    background: #fff;
    border-radius: 8px;
    transition: .2s all;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    width: 300px;
    z-index: 1
}

.def-content:before {
    position: absolute;
    bottom: -8px;
    right: 22px;
    left: auto;
    display: inline-block !important;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
    content: ''
}

.def-content .def-header {
    background: #4b4b4c;
    padding: 10px;
    border-radius: 8px 8px 0 0px;
    color: #fff;
    position: relative
}

.def-content .def-header .close-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 10px;
    left: initial;
    padding: 0;
    margin: 0;
    border: 0 none;
    background: none;
    line-height: 1;
    width: 26px;
    height: 26px;
    cursor: pointer;
    color: #fff;
    background: #4b4b4c;
    border-radius: 50%;
    text-align: center
}

.def-content .item>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 10px;
    transition: .3s linear all
}
.def-content .item>a .detail {
    flex-grow: 1;
    line-height: normal;
}
.def-content .item.phone>a .img {
    background: #4EB625;
}
.def-content .item>a .img {
    flex-grow: 0;
    flex: none;
    height: 34px;
    width: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    border-radius: 50%;
    color: #fff !important;
}
.def-content .item.zalo>a .img {
    background: #0165f8;
}
.def-content .item>a .detail {
    flex-grow: 1;
    line-height: normal;
}
.def-content .item>a .detail .arcu-item-title {
    font-weight: 700;
    font-size: 1rem;
    display: block;
    line-height: normal;
}
.def-content .item>a .detail .arcu-item-subtitle {
    font-size: 1rem;
    color: #787878;
}
.def-content .item>a .detail {
    flex-grow: 1;
    line-height: normal;
}

.def-content .item>a .img svg {
    height: 20px;
    width: 20px;
}
.def-content .item svg {
    fill: #fff;
}
.main-widget .close-icon svg {
    width: 25px;
    height: 25px;
}

@media only screen and (max-width: 576px) {
	.section-number .item-list{
		display: none !important;
	}

	.h2-paragraph{
		text-align: justify;
	}
}

#product-detail .thumbnail img {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
    max-width: 110px !important;
}
#product-detail .thumbnail img:hover,
#product-detail .thumbnail img.active {
    opacity: 1;
}
#product-detail .carousel-item img{
    max-height: 300px;
    object-fit: contain;
}
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 7; /* số dòng tối đa */
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.line-clamp.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.toggle-more {
    margin-top: 10px;
/*    background-color: #007bff;*/
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}
/*Product new*/
.categories ul{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
}
li .cate-item {
    display: block;
    padding: 4px;
}
li .cate-item img {
    background-color: unset;
    border-radius: 8px;
    max-width: 47px;
    padding: 8px 4px 4px;
    width: auto;
    height: auto;
    min-height: 30px;
    max-height: 47px;
    margin: 0 auto;
}

li .cate-item a {
    position: relative;
    display: block;
/*    width: 60px;*/
    color: #1d2939;
    text-align: center;
}

li.active .cate-item span{
    color: #ec1514;
}
li .cate-item span {
    max-width: 72px;
    font-size: 12px;
    width: 60px;
    max-height: 36px;
    margin: 2px auto;
    line-height: 18px;
    padding: 0;
    align-content: baseline;
}
.product .col-12 h3{
    font-size: .9rem;
    height: 45px;
    font-weight: 400;
}
@media only screen and (max-width: 768px) {
    .categories li {
        width: calc(25%);
    }
    .categories ul{
        justify-content: normal;
    }
}
.toc-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 7px 1rem;
    background-color: #f4f6f8;
}
.toc-header h3 {
    margin: 0;
    font-size: 1.125rem !important;;
    line-height: 1.75rem !important;;
    font-weight: 400 !important;;
    margin-bottom: 0px !important;
}
.table-of-contents nav ul li{
    padding-bottom: 0px !important;
}
.toc-header svg {
    width: 35px;
    height: 35px;
    background-color: #ced0d2;
    color: #fff;
    border-radius: 50%;
    padding: 6px;
}
.pl-6{
    padding-left: 6px !important;
}