@import "../ds/language.css";
@import "../ds/heading.css";
@import "../ds/button.css";
@import "../ds/rwbootstrap.css";
@import "../ds/color.css";
/* 
    Company     : AIinnovation
    Description : CSS
    Purpose     : ใช้สำหรับ class ต่างๆ ในเว็บ อิงตาม Design System ใน Figma
*/

.top__cart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.font.d3 {
    font-family: Inter;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.font.body {
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.breadcrum__cart {
    width:100%;
}

.frame-card {
    display:felx;
    padding: var(--Spacing-Spacing-spacing-4xl, 32px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Spacing-Spacing-spacing-4xl, 32px);
    flex-shrink: 0;
    align-self: stretch;

    border-radius: 6.483px;
    border: 0.81px solid var(--Gray-Gray-25, #F1F2F5);
    background: var(--Base-White, #FFF);

}

.frame-card.dark {
    border-radius: var(--Radius-Number-radius-md, 8px);
    border: 1px solid var(--Gray-Gray-50, #C1C4CC);
    background: var(--Base-White, #FFF);
}

.frame-card {
    display:felx;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Spacing-Spacing-spacing-4xl, 32px);
    flex-shrink: 0;
    align-self: stretch;

    border-radius: 6.483px;
    border: 0.81px solid var(--Gray-Gray-25, #F1F2F5);
    background: var(--Base-White, #FFF);

}

.divider-full {
    background:var(--Gray-Gray-25, #F1F2F5);
    height:1px;
    width:100%;
    display:block;
    margin-top:16px;
    margin-bottom:32px;
}

.frame-shadow {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: var(--Spacing-Spacing-spacing-3xl, 24px);
    border-radius: var(--Radius-Number-radius-md, 8px) var(--Radius-Number-radius-md, 8px) var(--Radius-Number-radius-md, 8px) var(--Radius-Number-radius-md, 8px);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
}



.ss-main , .form-control{
    padding:10px 16px!important;
    border-radius: 8px!important;
}
input[type='checkbox'].default-theme {
    border-radius: var(--Radius-Number-radius-xs, 4px);
    
    border: 1px solid var(--Gray-Gray-50, #C1C4CC);
    width:24px;
    height:24px;
    margin-top:0px;
}

.content-add-on .form-check {
    margin-bottom:16px;
}

input[type='checkbox'].default-theme:checked{
    
    border: 0.987px solid var(--Orange-Orange-500, #FF7A00);

    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNS4wMDAwNiAxMkwxMC4wMDAxIDE3TDIwLjAwMDEgNyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjk3NDI3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=');
    background-color: var(--Orange-Orange-500, #FF7A00); /* สีพื้นหลัง */
    background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
    background-position: center center; /* ตำแหน่งของภาพ */
    
}

.items-add-on {
    margin-right:12px;
}

a.btn.outline {
    display: flex;
    padding: var(--Spacing-Spacing-spacing-lg, 10px) var(--Spacing-Spacing-spacing-5xl, 40px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-Spacing-spacing-xs, 4px);
    flex: 1 0 0;
    background: #fff;
    color: var(--Orange-Orange-500, #FF7A00);

    border-radius: var(--Radius-Number-radius-md, 8px);
    border: 1px solid var(--Orange-Orange-500, #FF7A00);
}

.default-text {
    font-size: 16px;
    font-weight: 500;
}

/* Tab */

.bg-tab-section {
    background: var(--Base-BG, #FFF);
}

.bg-tab-section:not(.layout-1) .tab-nav.nav-tabs {
    background: var(--Base-White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
}
.bg-tab-section.layout-2 .tab-nav.nav-tabs {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
}

.bg-tab-section.layout-1 .tab-nav.nav-tabs , .bg-tab-section.layout-2 .tab-nav.nav-tabs {
    background: var(--Base-White, #FFF);
}

.tab-item.nav-item {
    display: flex;
    padding: var(--Spacing-Spacing-spacing-xl, 16px) 18px;
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-Spacing-spacing-xs, 4px);
}

.brand-item__heroproduct.selected {
    border: 4px solid #FF7A00!important;
}

.tab-link.nav-link {
    color: var(--Blue-Blue-500, #162045);
    border: none;
}

.bg-tab-section.layout-1 .tab-item.nav-item .nav-link , .bg-tab-section.layout-2 .tab-item.nav-item .nav-link {
    color: var(--Gray-Gray-200, #797D8E);

}

.bg-tab-section.layout-2 .tab-item.nav-item .nav-link {
    font-weight: 700!important;
}

.tab-link.nav-link.active,
.tab-item.nav-item.show .tab-link.nav-link {
    color: var(--Orange-Orange-500, #FF7A00) !important;
    font-weight: 700;
}

.tab-item.nav-item:has(.nav-link.active) {
    border-radius: var(--Radius-Number-radius-none, 0px);
    border-bottom: 2px solid var(--Orange-Orange-500, #FF7A00);
}

.file-detail .file-caption-name {
    color: var(--Orange-Orange-500, #FF7A00);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.pdf .file-preview-thumbnails .kv-file-content {
    display:none;
}