/* region General */
*,
*::before,
*::after { box-sizing: border-box; }
*:focus { outline: none; box-shadow: none}

@media (prefers-reduced-motion: no-preference) {
    :root { scroll-behavior: smooth; }
}

:root {
    --bs-white: #ffffff;
    --bs-gray: #677279;
    --bs-dark-gray: #585858;
    --bs-light-gray: #f7fafb;
    --bs-link: #2d287f;
    --bs-primary: #00a3ea;
    --bs-success: #40ad40;
    --bs-warning: #ff6000;
    --bs-danger: #f9403f;
    --bs-dark: #163d7f;

    --bs-light-primary: #f1faff;
    --bs-light-success: #e8fff3;
    --bs-light-info: #f8f5ff;
    --bs-light-warning: #ed681a1f;
    --bs-light-danger: #fff5f8;
    --bs-light-dark: #eff2f5;

    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
table { border-collapse: collapse; border-spacing: 0; }

body { position: relative; margin: 0; zoom:1; font-family: "Barlow", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--bs-dark); background-color: #f3f5f6; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body.active { overflow: hidden; }

button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; }
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) { cursor: pointer; }

a {text-decoration: none;  transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; }

ul { list-style: none; padding: 0; margin: 0; }
b, strong { font-weight: 700; }
.dropdown, .dropend, .dropstart, .dropup { position: relative; }

.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }

.sticky-top { position: -webkit-sticky; position: sticky; top: 100px; z-index: 2; }

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.row { display: flex; flex-wrap: wrap; margin-top: 0; margin-right: -15px; margin-left: -15px; }
.row>* { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: 15px; padding-left: 15px; margin-top: 0; }

.col { flex: 1 0 0; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px){
    .container, .container-sm { max-width: 540px; }
}
@media (min-width: 768px){
    .container, .container-md, .container-sm { max-width: 720px; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px){
    .container, .container-lg, .container-md, .container-sm { max-width: 960px; }
    .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }

    .order-lg-first { order: -1 !important; }
    .order-lg-0 { order: 0 !important; }
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .order-lg-3 { order: 3 !important; }
    .order-lg-4 { order: 4 !important; }
    .order-lg-5 { order: 5 !important; }
    .order-lg-last { order: 6 !important; }
}
@media (min-width: 1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1140px; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1320px; }
    .col-xxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

/* alert */
.alert { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #e9ecef; border-left-width: .25rem; border-radius: .25rem; }
.alert-success { border-left-color: var(--bs-success); }
.alert-warning { border-left-color: var(--bs-warning); }
.alert-danger { border-left-color: var(--bs-danger); }
/* badge */
.badge { display: inline-block; padding: .35em .65em; font-size: .75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; }
.badge-success { background-color: var(--bs-success); }
.badge-warning { background-color: var(--bs-warning); }
.badge-danger { background-color: var(--bs-danger); }
.badge-secondary { background-color: var(--bs-gray); color: var(--bs-dark);}

.form-control { display: block; width: 100%; padding: 10px; min-height: 42px; font-size: 14px; font-weight: 400; line-height: 1; color: var(--bs-dark); background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.form-select { display: block; width: 100%; padding: 13px 10px; min-height: 42px; -moz-padding-start: calc(0.75rem - 3px); font-size: 14px; font-weight: 400; line-height: 1; color: var(--bs-dark); background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: 1px solid #ced4da; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
textarea.form-control { padding: 10px; min-height: 90px; line-height: 1.5; }
.form-control:focus { border-color: var(--bs-primary); }

/* modal */
.modal { position: fixed; top: 0; left: 0; z-index: 1060; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; }
.modal-dialog { max-width: 500px; margin: 1.75rem auto; }
.modal.fade .modal-dialog { transition: transform .3s ease-out; transform: translate(0,-50px); }
.modal.show .modal-dialog { transform: none; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; }
.modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(.3rem - 1px); border-top-right-radius: calc(.3rem - 1px); }
.modal-header .modal-title { margin: 0; line-height: 1.5; font-size: 18px; font-weight: 500; }
.modal-header .btn-close-w { box-sizing: content-box; width: 1em; height: 1em; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: .25rem; opacity: .5; padding: .5rem .5rem; margin: -.5rem -.5rem -.5rem auto;}
.modal-header .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: .25em .25em; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: .25rem; opacity: .5; }
.modal-header .btn-close { padding: .5rem .5rem; margin: -.5rem -.5rem -.5rem auto; }
.modal-header .btn-close2 { box-sizing: content-box; width: 1em; height: 1em; padding: .5rem .5rem; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: .25rem; opacity: .7; margin: -.5rem -.5rem -.5rem auto;}
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
.modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: .75rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(.3rem - 1px); border-bottom-left-radius: calc(.3rem - 1px); }
.modal-footer>* { margin: .25rem; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .5; }
.modal.modal-static .modal-dialog { transform: scale(1.02); }

/* dropdown */
.dropdown .dropdown-menu { position: absolute; z-index: 1000; display: none; margin: 0; padding: 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff;    border: 1px solid rgba(0,0,0,.15); background-clip: padding-box;  }
.dropdown .dropdown-menu.show { display: block; }
.dropdown .dropdown-menu .dropdown-item { display: block; width: 100%; padding: .25rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; }
.dropdown .dropdown-menu[data-bs-popper] { top: 100%; left: 0; margin-top: .125rem; }
.dropdown .dropdown-menu-end { --bs-position: end; }
.dropdown .dropdown-menu-start { --bs-position: start; }
.dropdown .dropdown-toggle { white-space: nowrap; }
.dropdown .dropdown-toggle::after { display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }
.dropdown .dropdown-toggle.show::after { display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-bottom: .3em solid; border-right: .3em solid transparent; border-top: 0; border-left: .3em solid transparent; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; font-weight: 600; line-height: 1; color: var(--bs-dark); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0 15px; font-size: 14px; border-radius: 4px; transition: all .2s ease-in-out; }
.btn:before { -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; }
.btn svg {width: 22px; height: 22px; }

.btn-warning { color: var(--bs-white); background-color: var(--bs-warning); border-color: var(--bs-warning); }
.btn-primary { color: var(--bs-white); background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-success { color: var(--bs-white); background-color: var(--bs-success); border-color: var(--bs-success); }
.btn-dark { color: var(--bs-white); background-color: var(--bs-dark); border-color: var(--bs-dark); }

.btn:focus { box-shadow: none; }
.btn.disabled, .btn:disabled { pointer-events: none; opacity: .65; }

.table-semantic>:not(caption)>*>* { box-shadow: none; border-bottom-width: 0; background-color: transparent; }

.table-semantic { width: 100%; font-size: 14px; border-radius: 0.28571429rem; border: 1px solid rgba(34,36,38,.15); vertical-align: middle; background: #fff; color: rgba(0,0,0,.87); margin-top: 0 !important; }
.table-semantic thead th { background-color: #f9fafb; padding: 0.92857143em 0.78571429em; color: rgba(0,0,0,.87); transition: background .1s ease,color .1s ease; }
.table-semantic thead tr:first-child>th:first-child { border-radius: 0.28571429rem 0 0 0; }
.table-semantic thead tr:first-child>th:last-child { border-radius: 0 0.28571429rem 0 0; }
.table-semantic thead tr:first-child>th:only-child { border-radius: 0.28571429rem 0.28571429rem 0 0; }
.table-semantic tbody td { border-top: 1px solid rgba(34,36,38,.1); padding: 0.78571429em 0.78571429em; transition: background .1s ease,color .1s ease; }
.table-semantic tbody td .btn { height: 32px; padding: 0 .6em; margin: 0 2px; font-size: 12px; }
.table-semantic tbody td .btn i { font-size: 16px; }
.table-semantic tbody td .btn svg { width: 15px; height: 15px; }
.table-semantic tbody tr:hover td { background-color: #f9fbfd; }
.table-semantic tbody td a { color: var(--bs-dark); font-weight: 600; }
.table-semantic tbody td a:hover { color: var(--bs-primary); }
/* Kategori sayfası fiyat tablosu bölümü */
.section-pricetable { padding: 10px 0 40px; }
.section-pricetable .pricetable-title { font-size: 22px; font-weight: 700; margin-bottom: 16px; color: var(--bs-dark); }
.pricetable-title { font-size: 22px; font-weight: 700; margin: 24px 0 14px; color: var(--bs-dark); }
.pricetable-caption { caption-side: top; text-align: left; font-size: 13px; color: var(--bs-gray); padding: 0 0 8px; }
/* endregion */

/* region Header */
.header-top { position: relative; z-index: 4; padding: 7px 40px; background: #00a3ea; color: #fff; font-weight: 400; }
.header-top .row { align-items: center; }
.header-top .col-left b { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .2px; }
.header-top .col-left b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #ffffff33; flex: 0 0 auto; }
.header-top .col-right { text-align: right; }
.header-top .navUser>ul { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #fff; font-weight: 500; }
.header-top .navUser>ul>li { margin: 0; padding: 0; line-height: 1; list-style: none; }
.header-top .navUser>ul>li:not(.nav-currency) a { display: inline-block; padding: 5px 11px; border-radius: 999px; color: #fff; font-weight: 500; opacity: .92; transition: background-color .18s ease, opacity .18s ease; }
.header-top .navUser>ul>li:not(.nav-currency) a:hover { background: #ffffff29; opacity: 1; }

/* Para birimi seçici — özel pill (tarayıcı select görünümü gizlenir) */
/*.header-top .navUser>ul>li.nav-currency { margin-right: 10px; padding-right: 12px; border-right: 1px solid #ffffff40; }*/
.header-top .currency-form { display: flex; margin: 0; }
.header-top .currency-form select {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2;
    padding: 5px 30px 5px 13px; border-radius: 6px;
    background-color: #ffffff26; border: 1px solid #ffffff4d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
    transition: background-color .18s ease, border-color .18s ease;
}
.header-top .currency-form select:hover { background-color: #ffffff3b; border-color: #ffffff80; }
.header-top .currency-form select:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.header-top .currency-form select option { color: #163d7f; background: #fff; font-weight: 500; }

.header-bottom { position: relative; z-index: 3; padding: 10px 0; background-color: #fff; }
.header-bottom .logo { display: inline-flex; height: 100%; align-items: center; justify-content: flex-start; }
.header-bottom .logo img { height: 20px; }
.header-bottom .logo svg { height: 40px; }
.header-bottom .order-lg-0 { display: flex; align-items: center; justify-content: flex-start; }

.header-bottom .phone { flex: 0 0 135px; position: relative; top: 2px; line-height: 1; padding-left: 20px; margin-left: 24px; border-left: 1px solid #ccc; }
.header-bottom .phone a { display: flex; align-items: center; justify-content: flex-start; font-size: 18px; line-height: 1; font-weight: 400; color: var(--bs-dark); }
.header-bottom .phone a svg { width: 16px; height: 16px; margin-right: 5px; fill: var(--bs-dark); }

.header-bottom .search { width: 100%; }
.header-bottom .search form { position: relative;  border: solid 1px #f5f5f5; border-radius: 16px; overflow: hidden; }
.header-bottom .search form input { width: 100%; background-color: #f5f5f5; padding: 5px 6px 8px 20px; border: 0; font-size: 16px; height: 42px; }
.header-bottom .search form button { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; height: 100%; width: 3rem; background: 0 0; opacity: .5; border: none; padding: 0; }

.header-bottom .h-links { display: flex; align-items: center; justify-content: flex-end; }
.header-bottom .h-links a { position: relative; display: flex; align-items: center; justify-content: flex-start; color: var(--bs-dark); font-size: 14px; line-height: 1.4; margin-left: 20px; padding-left: 20px; border-left: 1px solid #edecec; }
.header-bottom .h-links a svg { width: 28px; height: 28px; margin-right: 6px; fill: var(--bs-dark); }
.header-bottom .h-links a>span>small { font-size: 11px; display: block; color: var(--bs-dark-gray) }
.header-bottom .h-links a .m-cart-amount { position: absolute; left: 38px; top: 0; background-color: var(--bs-warning); font-size: 11px; color: #fff; line-height: 1; padding: 1px 3px; border-radius: 4px; }
.header-bottom .h-links a:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.header-bottom .h-links a.call-center { flex-direction: column; align-items: flex-end; font-size: 24px; font-weight: 700; line-height: 1.1; padding-right: 60px }
.header-bottom .h-links a.call-center small { display: block; font-size: 15px; font-weight: 400; color: #20c860; }
.header-bottom .h-links a.call-center svg { position: absolute; right: 0; top: 0; width: 44px; height: 44px; fill: #25d366 }

.header-nav { position: relative; z-index: 1; background-color: #fff; border-bottom: 1px solid #edecec; border-top: 1px solid #edecec; }
.header-nav-container { display: flex; align-items: center; }
.header-nav-container>ul { display: flex; }
.header-nav-container>ul>li>a { color: #111111; font-size: 16px; padding: 10px 14px; font-weight: 500; transition: all .2s ease-in-out; position: relative; height: 100%; display: flex; justify-content: flex-start; align-items: center; text-align: center; }
.header-nav-container>ul>li:first-child>a { padding-left: 0; }

.mega-menu { position: static; }
.mega-menu .dropdown-menu { width: 100%; position: absolute; top: -2px !important; padding: 0; border: 0; background-color: transparent; box-shadow: none; }
.mega-menu .dropdown-menu .mega-menu-main { max-width: 1290px; width: 100%; padding: 34px 14px; border-radius: 0 0 16px 16px; margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .08)); background-color: #fff; border: 1px solid #edecec; }
.mega-menu .dropdown-menu b { display: block; font-size: 13px; font-weight: 700; margin: 0 0 1.125rem; text-transform: uppercase; line-height: 1.06rem; color: #000; }
.mega-menu .dropdown-menu .d-menu { list-style: none; padding: 0; margin: 0; }
.mega-menu .dropdown-menu .d-menu li { display: flex; align-items: center; justify-content: flex-start; width: 100%; margin: 0 0 5px; }
.mega-menu .dropdown-menu .d-menu.empty li { margin: 0; }
.mega-menu .dropdown-menu .d-menu li:last-child { margin-bottom: 0; }
.mega-menu .dropdown-menu .d-menu li a { display: flex; align-items: center; justify-content: flex-start;  color: var(--bs-dark); font-size: 15px; padding: 4px 0; text-decoration: none; }
.mega-menu .dropdown-menu .d-menu li a > .thumb { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; font-size: 13px; margin-right: 7px; background-color: #111; color: #fff; }
.mega-menu .dropdown-menu .d-menu li a > .thumb > i { margin: 0; }
.mega-menu .dropdown-menu .d-menu li a > .text { padding-left: 10px; }
.mega-menu .dropdown-menu .d-menu li a > .text > small { display: block; font-size: 11px; line-height: 1.3; font-weight: 400; color: #999; }
.mega-menu .dropdown-menu .d-menu li a:hover { color: var(--bs-primary); }
.mega-menu .dropdown-menu .d-menu li a:hover > .thumb  { border-color: var(--bs-primary); }
.mega-menu .dropdown-menu .row .col-lg-3 { border-right: 1px solid #edecec; padding: 0 35px; }
.mega-menu .dropdown-menu .row .col-lg-3:last-child { border-right: 0; }

@media only screen and (max-width: 767px){
    .header-top { padding: 7px 12px; }
    .header-top .navUser>ul { display: flex; align-items: center; justify-content: center; }
    .header-top .navUser>ul>li { margin: 0; }

    .header-nav { background-color: var(--bs-dark-gray); border-bottom: 0; }
    .header-nav-container ul { width: 100%; }
    .header-nav-container ul li { display: none; }
    .header-nav-container ul>li.all-cats { display: block; margin-right: 0; }
    .header-nav-container ul>li.all-cats>a { width: 100%; }

    .header-bottom .phone { display: none; }
    .header-bottom .h-links a span { display: none; }
    .header-bottom .search { margin-top: 10px; }
    .header-bottom .h-links a.call-center { padding-right: 0; font-size: 20px; }
    .header-bottom .h-links a.call-center svg { display: none; }

    .header-bottom .logo img { width: auto; height: 12px; }
    .header-bottom .logo svg { height: 26px; }
    .header-bottom .h-links a svg { zoom: 80%; }
    .header-top .col-left b { justify-content: center; text-align: center; }
}
/* endregion */

[v-cloak] { opacity: 0; visibility: hidden; transition: visibility 0s 5s, opacity 5s linear; }
[v-cloak] > * { opacity: 0; visibility: hidden; transition: visibility 0s 5s, opacity 5s linear;  }

/* region Products */
.section-products { padding: 50px 0; }

.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 15px;  }
.product { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; width: 100%; background-color: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 15px; box-shadow: 0 8px 26px rgba(16, 24, 40, .05); border: 1px solid var(--pe-line); }
.product .link { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; color: var(--bs-dark); width: 100%; }
.product .link .thumb { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; height: 280px; overflow: hidden; }
.product .link .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product .link .detail { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; padding: 10px; gap: 10px; }
.product .link .detail .name { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; font-weight: 600; width: 100%; }
.product .link .detail .specs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: 100%; }
.product .link .detail .specs .spec { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--bs-light-primary); color: var(--bs-dark); font-size: 13px; font-weight: 500; line-height: 1.2; }
.product .link .detail .specs .spec::before { content: ""; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .85; }
.product .link .detail .specs .spec-area::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3H3v18h18z'/%3E%3Cpath d='M9 3v6H3M21 15h-6v6'/%3E%3C/svg%3E"); }
.product .link .detail .specs .spec-room::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.product .link .detail .price { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; font-weight: 600; width: 100%; gap: 10px; line-height: 1; }
.product .link .detail .price .old { font-size: 16px; font-weight: 400; color: #999999; text-decoration: line-through }
.product .action { display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px; width: 100%; padding: 0 10px 10px; }
.product .action .btn { height: 36px; min-width: 90px; }

.product-title { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #ddd; }
.product-title h2 { font-size: 32px; font-weight: 700; }
.product-title a { margin-left: auto; font-size: 16px; height: auto; }
/* endregion */

/* region Home Page */
.section-slide { padding: 0 0 30px; background-color: #fff; }
.hero-intro { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; height: 500px; background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; padding: 30px; overflow: hidden; border-radius: 20px; }
.hero-intro .eyebrow { display: inline-flex; align-items: center; margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--bs-primary); }
.hero-intro h1 { max-width: 760px; font-size: 38px; line-height: 1.12; font-weight: 700; color: var(--bs-dark); }
.hero-intro p { max-width: 780px; margin-top: 12px; font-size: 18px; color: var(--bs-dark-gray); }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.section-story { padding: 20px 0; background-color: #fff; }
.section-story .banner { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 15px; width: 100%; }
.section-story .banner a { display: flex; align-items: flex-start; justify-content: flex-start; width: 202px; height: 160px; border-radius: 10px; overflow: hidden; flex-direction: column; }
.section-story .banner a > img { width: 100%; height: 130px; }
.section-story .banner a > span { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 30px; background-color: var(--bs-dark); color: #fff; font-size: 12px; }

.section-content { padding: 60px 0; }
.section-content .intro-panel { background-color: #fff; border-radius: 8px; padding: 26px; border-left: 4px solid var(--bs-primary); }
.section-content .intro-panel h2 { margin-bottom: 12px; font-size: 24px; font-weight: 700; }
.section-content .seo-content { background-color: #fff; border-radius: 8px; padding: 30px; margin-bottom: 30px; }
.section-content h1 { font-size: 28px; margin-bottom: 5px; font-weight: 500; }
.section-content h2 { font-size: 22px; margin-bottom: 5px; font-weight: 500; }
.section-content h3 { font-size: 19px; margin-bottom: 5px; font-weight: 500; }
.section-content p { margin: 0 0 15px; }
.section-content a { color: var(--bs-primary) }
.section-content ul { list-style: square; padding-left: 30px; margin: 5px 0 20px; }
.section-guide { padding-top: 20px; }
.table-semantic { overflow: hidden; }
/* endregion */

@media only screen and (max-width: 991px){
    .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slide-main { flex-direction: column; }
    .slide-main .slide,
    .slide-main .banner { flex: 0 0 auto; width: 100%; }
    .slide-main .slide { height: auto; }
    .slide-main .slide img { height: auto; object-fit: cover; }
    .slide-main .banner a { width: calc(33.333% - 10px); }
}

@media only screen and (max-width: 767px){
    .hero-intro h1 { font-size: 32px; }
    .hero-intro p { font-size: 16px; }
    .products { grid-template-columns: 1fr; }
    .product-title { align-items: flex-start; flex-direction: column; gap: 10px; }
    .product-title a { margin-left: 0; }
    .slide-main .banner a { width: calc(50% - 8px); }
    .section-content { padding: 36px 0; }
    .section-content .seo-content,
    .section-content .intro-panel { padding: 20px; }
    .table-semantic { display: block; overflow-x: auto; }
}

/* region Footer */
.footer { position: relative; padding: 50px 0 0; background-color: #0c2754; background-size: cover;  background-repeat: no-repeat;}
.footer .foot-divider { position: absolute; pointer-events: none; display: block; left: 0; top: -8px; width: 100%; height: 8px; object-fit: cover; object-position: center; }
.footer .container { position: relative; }
.footer .breadcrumb { position: absolute; top: -55px; left:15px; background: transparent; padding: 0; margin-bottom: 0; font-size: 13px; }
.footer .breadcrumb a { color: #ccc; }
.footer a { color: #ccc; }
.footer a:hover { color: var(--bs-primary); }

.footer .footer-top h3 { font-size: 20px; line-height: 1.4; margin: 0; font-weight: 600; color: #fff; text-transform: capitalize; }
.footer .footer-top ul { margin: 20px 0 0 0; padding: 0; list-style: none;}
.footer .footer-top li { color: #ccc; font-weight: 400; font-size: 16px; margin-bottom: 10px;}
.footer .footer-top .col-md-4 { position: relative; }
.footer .footer-top .col-md-4:before { position: absolute; content: ''; right: 35px; top:0; height: 100%; width: 1px; background: rgba(247,249,251,0.1);}
.footer .footer-top .footer-social img { height: 30px; margin-top: 20px; object-fit: cover; }
.footer .footer-top .footer-social .footer-social-link { margin-top: 20px; }
.footer .footer-top .footer-social .footer-social-link ul { margin: 0; padding: 0; }
.footer .footer-top .footer-social .footer-social-link ul li { display: inline-block; list-style: none; margin-right: 4px;}
.footer .footer-top .footer-social .footer-social-link ul li a { display: flex; align-items: center; justify-content: center; font-size: 24px; height: 48px; width: 48px; line-height: 46px; border-radius: 10px; text-align: center; background-color: #0003;color: #fff;}
.footer .footer-top .footer-social .footer-social-link ul li a svg {fill:#fff; width: 24px; height: 24px;}
.footer .footer-top .footer-social .footer-social-link ul li a:hover { background: var(--bs-primary); }
.footer .footer-top .footer-address { padding-right: 30px; }
.footer .footer-top .footer-address p { margin-top: 20px;margin-bottom: 0; font-weight: 400; font-size:1rem; margin-right: 50px; color: #ccc;}
.footer .footer-top .footer-address ul li:nth-child(1) { font-weight: 400; font-size: 1rem; margin-bottom: 10px;}
.footer .footer-top .footer-address ul li:nth-child(2) { line-height: 40px; font-weight: 600; font-size: 17px;}
.footer .footer-top .footer-address ul li:nth-child(3) { line-height: 40px; font-weight: 600; font-size: 17px;}
.footer .footer-top .foot-link ul { width: 100%; margin-top: 8px; }
.footer .footer-top .foot-link ul li { width: 100%; margin-bottom: 2px; }

.footer .footer-bottom { padding: 18px 0;margin-top: 40px; border-top: 1px solid rgba(247,249,251,0.1); background: #0c2754;}
.footer .footer-bottom p { color: #ccc; font-weight: 400; margin: 0; font-size: .9rem;}
.footer .footer-bottom p a { color: #ccc; }
.footer .footer-bottom ul { float: right; margin: 0; padding: 0; }
.footer .footer-bottom ul li { list-style: none; display: inline-block; margin-left: 20px; }
.footer .footer-bottom ul li a { color: #ccc; font-weight: 400; font-size: .9rem;}
.footer .footer-bottom ul li a:hover { color: var(--bs-primary); }

@media only screen and (max-width: 767px){
    .footer .footer-top .footer-address { padding-right: 0; }
    .footer .footer-top .col-md-4 { padding-top: 50px; text-align: center; }
    .footer .footer-top .col-md-4:before { height: 1px; width: 100%; top: 25px; right: 0; }
    .footer .footer-bottom { text-align: center; }
    .footer .footer-bottom ul { margin-top: 15px; }
    .footer .footer-bottom ul li { margin: 3px 10px; }
    .footer .footer-top h3 { font-size: 16px; text-align: center; }
    .footer .footer-top .foot-link { text-align: center; margin: 10px 0; }
    .footer .footer-top .foot-link ul { margin-top: 0 !important; }
    .footer .footer-top .foot-link ul li { font-size: 14px; }
}
/* endregion */