@charset "UTF-8"; @font-face{ font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal}:root{ --swiper-theme-color:#007aff} .swiper{ margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1} .swiper-vertical> .swiper-wrapper{ flex-direction: column} .swiper-wrapper{ position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box} .swiper-android .swiper-slide, .swiper-wrapper{ transform: translate3d(0px, 0, 0)} .swiper-pointer-events{ touch-action: pan-y} .swiper-pointer-events.swiper-vertical{ touch-action: pan-x} .swiper-slide{ flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform} .swiper-slide-invisible-blank{ visibility: hidden} .swiper-autoheight, .swiper-autoheight .swiper-slide{ height: auto} .swiper-autoheight .swiper-wrapper{ align-items: flex-start; transition-property: transform, height} .swiper-backface-hidden .swiper-slide{ transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden} .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper{ perspective: 1200px} .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper{ transform-style: preserve-3d} .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10} .swiper-3d .swiper-slide-shadow{ background: rgba(0, 0, 0, 0.15)} .swiper-3d .swiper-slide-shadow-left{ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))} .swiper-3d .swiper-slide-shadow-right{ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))} .swiper-3d .swiper-slide-shadow-top{ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))} .swiper-3d .swiper-slide-shadow-bottom{ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))} .swiper-css-mode> .swiper-wrapper{ overflow: auto; scrollbar-width: none; -ms-overflow-style: none} .swiper-css-mode> .swiper-wrapper::-webkit-scrollbar{ display: none} .swiper-css-mode> .swiper-wrapper> .swiper-slide{ scroll-snap-align: start start} .swiper-horizontal.swiper-css-mode> .swiper-wrapper{ scroll-snap-type: x mandatory} .swiper-vertical.swiper-css-mode> .swiper-wrapper{ scroll-snap-type: y mandatory} .swiper-centered> .swiper-wrapper::before{ content: ""; flex-shrink: 0; order: 9999} .swiper-centered.swiper-horizontal> .swiper-wrapper> .swiper-slide:first-child{ margin-inline-start: var(--swiper-centered-offset-before)} .swiper-centered.swiper-horizontal> .swiper-wrapper::before{ height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after)} .swiper-centered.swiper-vertical> .swiper-wrapper> .swiper-slide:first-child{ margin-block-start: var(--swiper-centered-offset-before)} .swiper-centered.swiper-vertical> .swiper-wrapper::before{ width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after)} .swiper-centered> .swiper-wrapper> .swiper-slide{ scroll-snap-align: center center} .swiper-virtual .swiper-slide{ -webkit-backface-visibility: hidden; transform: translateZ(0)} .swiper-virtual.swiper-css-mode .swiper-wrapper::after{ content: ""; position: absolute; left: 0; top: 0; pointer-events: none} .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{ height: 1px; width: var(--swiper-virtual-size)} .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{ width: 1px; height: var(--swiper-virtual-size)}:root{ --swiper-navigation-size:44px} .swiper-button-next, .swiper-button-prev{ position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color))} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: 0.35; cursor: auto; pointer-events: none} .swiper-button-next:after, .swiper-button-prev:after{ font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1} .swiper-button-prev, .swiper-rtl .swiper-button-next{ left: 10px; right: auto} .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{ content: "prev"} .swiper-button-next, .swiper-rtl .swiper-button-prev{ right: 10px; left: auto} .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{ content: "next"} .swiper-button-lock{ display: none} .swiper-pagination{ position: absolute; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10} .swiper-pagination.swiper-pagination-hidden{ opacity: 0} .swiper-horizontal> .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 10px; left: 0; width: 100%} .swiper-pagination-bullets-dynamic{ overflow: hidden; font-size: 0} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ transform: scale(0.33); position: relative} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{ transform: scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{ transform: scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{ transform: scale(0.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{ transform: scale(0.33)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{ transform: scale(0.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{ transform: scale(0.33)} .swiper-pagination-bullet{ width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2)} button.swiper-pagination-bullet{ border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none} .swiper-pagination-clickable .swiper-pagination-bullet{ cursor: pointer} .swiper-pagination-bullet:only-child{ display: none !important} .swiper-pagination-bullet-active{ opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color))} .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical> .swiper-pagination-bullets{ right: 10px; top: 50%; transform: translate3d(0px, -50%, 0)} .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical> .swiper-pagination-bullets .swiper-pagination-bullet{ margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block} .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic{ top: 50%; transform: translateY(-50%); width: 8px} .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ display: inline-block; transition: 0.2s transform, 0.2s top} .swiper-horizontal> .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)} .swiper-horizontal> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{ left: 50%; transform: translateX(-50%); white-space: nowrap} .swiper-horizontal> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ transition: 0.2s transform, 0.2s left} .swiper-horizontal.swiper-rtl> .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{ transition: 0.2s transform, 0.2s right} .swiper-pagination-progressbar{ background: rgba(0, 0, 0, 0.25); position: absolute} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top} .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ transform-origin: right top} .swiper-horizontal> .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{ width: 100%; height: 4px; left: 0; top: 0} .swiper-horizontal> .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical> .swiper-pagination-progressbar{ width: 4px; height: 100%; left: 0; top: 0} .swiper-pagination-lock{ display: none} .swiper-scrollbar{ border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1)} .swiper-horizontal> .swiper-scrollbar{ position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%} .swiper-vertical> .swiper-scrollbar{ position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%} .swiper-scrollbar-drag{ height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0} .swiper-scrollbar-cursor-drag{ cursor: move} .swiper-scrollbar-lock{ display: none} .swiper-zoom-container{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center} .swiper-zoom-container> canvas, .swiper-zoom-container> img, .swiper-zoom-container> svg{ max-width: 100%; max-height: 100%; object-fit: contain} .swiper-slide-zoomed{ cursor: move} .swiper-lazy-preloader{ width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent} .swiper-slide-visible .swiper-lazy-preloader{ animation: swiper-preloader-spin 1s infinite linear} .swiper-lazy-preloader-white{ --swiper-preloader-color:#fff} .swiper-lazy-preloader-black{ --swiper-preloader-color:#000} @keyframes swiper-preloader-spin{ 100%{ transform: rotate(360deg)}} .swiper .swiper-notification{ position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000} .swiper-free-mode> .swiper-wrapper{ transition-timing-function: ease-out; margin: 0 auto} .swiper-grid> .swiper-wrapper{ flex-wrap: wrap} .swiper-grid-column> .swiper-wrapper{ flex-wrap: wrap; flex-direction: column} .swiper-fade.swiper-free-mode .swiper-slide{ transition-timing-function: ease-out} .swiper-fade .swiper-slide{ pointer-events: none; transition-property: opacity} .swiper-fade .swiper-slide .swiper-slide{ pointer-events: none} .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active{ pointer-events: auto} .swiper-cube{ overflow: visible} .swiper-cube .swiper-slide{ pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%} .swiper-cube .swiper-slide .swiper-slide{ pointer-events: none} .swiper-cube.swiper-rtl .swiper-slide{ transform-origin: 100% 0} .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active{ pointer-events: auto} .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev{ pointer-events: auto; visibility: visible} .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top{ z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden} .swiper-cube .swiper-cube-shadow{ position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0} .swiper-cube .swiper-cube-shadow:before{ content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px)} .swiper-flip{ overflow: visible} .swiper-flip .swiper-slide{ pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1} .swiper-flip .swiper-slide .swiper-slide{ pointer-events: none} .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active{ pointer-events: auto} .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top{ z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden} .swiper-creative .swiper-slide{ -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height} .swiper-cards{ overflow: visible} .swiper-cards .swiper-slide{ transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden} .gg-play-button-o{ box-sizing: border-box; position: relative; display: block; width: 50px; height: 50px; border: 4px solid currentColor; border-radius: 50%} .gg-play-button-o::before{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 0; height: 22px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 14px solid currentColor; top: 10px; left: 18px} .gg-chevron-down{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 22px; height: 22px; border: 2px solid transparent; border-radius: 100px} .gg-chevron-down::after{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 10px; height: 10px; border-bottom: 2px solid; border-right: 2px solid; transform: rotate(45deg); left: 4px; top: 2px; color: #025899} .gg-chevron-right{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 22px; height: 22px; border: 2px solid transparent; border-radius: 100px} .gg-chevron-right::after{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 10px; height: 10px; border-bottom: 2px solid; border-right: 2px solid; transform: rotate(-45deg); right: 6px; top: 4px} .gg-chevron-right-o{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 22px; height: 22px; border: 2px solid; border-radius: 100px} .gg-chevron-right-o::after{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 6px; height: 6px; border-bottom: 2px solid; border-right: 2px solid; transform: rotate(-45deg); left: 5px; top: 6px} .gg-search{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; margin-left: -4px; margin-top: -4px} .gg-search::after{ content: ""; display: block; box-sizing: border-box; position: absolute; border-radius: 3px; width: 2px; height: 8px; background: currentColor; transform: rotate(-45deg); top: 10px; left: 12px} .gg-phone{ box-sizing: border-box; position: relative; display: block; width: 22px; height: 22px; transform: scale(var(--ggs, 1))} .gg-phone::after, .gg-phone::before{ content: ""; display: block; box-sizing: border-box; position: absolute} .gg-phone::after{ width: 18px; height: 18px; border-top-left-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 12px; border-left: 4px solid; border-bottom: 4px solid; left: 2px; bottom: 2px; background: linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px, linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px} .gg-phone::before{ width: 20px; height: 20px; border: 6px double; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(-45deg); bottom: 2px; left: 2px} .gg-calendar-dates{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 18px; height: 18px; border: 2px solid; border-radius: 3px} .gg-calendar-dates::after, .gg-calendar-dates::before{ content: ""; display: block; box-sizing: border-box; position: absolute; border-radius: 3px; height: 2px; left: 2px} .gg-calendar-dates::before{ background: currentColor; width: 2px; box-shadow: 4px 0 0, 8px 0 0, 0 4px 0, 4px 4px 0, 8px 4px 0; top: 6px} .gg-calendar-dates::after{ width: 10px; top: -4px; box-shadow: 0 6px 0 0} .gg-close{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 22px; height: 22px; border: 2px solid transparent; border-radius: 40px} .gg-close::after, .gg-close::before{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 16px; height: 2px; background: currentColor; transform: rotate(45deg); border-radius: 5px; top: 8px; left: 1px} .gg-close::after{ transform: rotate(-45deg)} .gg-pin{ box-sizing: border-box; position: relative; display: block; transform: rotate(45deg) scale(var(--ggs, 1)); width: 18px; height: 18px; border-radius: 100% 100% 0 100%; border: 2px solid; margin-top: -4px} .gg-pin::before{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 8px; height: 8px; border: 2px solid; top: 3px; left: 3px; border-radius: 40px} .gg-time{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 18px; height: 18px; border-radius: 100%; border: 2px solid transparent; box-shadow: 0 0 0 2px currentColor} .gg-time::after{ content: ""; display: block; box-sizing: border-box; position: absolute; width: 7px; height: 7px; border-left: 2px solid; border-bottom: 2px solid; top: 1px; left: 5px} .js-cus-slide.swiper, .js-paper-slide.swiper{ overflow: hidden} .js-cus-slide.swiper .swiper-button-prev, .js-cus-slide.swiper .swiper-button-next, .js-paper-slide.swiper .swiper-button-prev, .js-paper-slide.swiper .swiper-button-next{ width: 30px; height: 30px; margin-top: -15px; background-position: center; background-repeat: no-repeat; background-size: 30px 30px} .js-cus-slide.swiper .swiper-button-prev::after, .js-cus-slide.swiper .swiper-button-next::after, .js-paper-slide.swiper .swiper-button-prev::after, .js-paper-slide.swiper .swiper-button-next::after{ display: none} .js-cus-slide.swiper .swiper-button-prev, .js-paper-slide.swiper .swiper-button-prev{ background-image: url("/wp-content/themes/i-dent/assets/images/ico_prev.svg")} .js-cus-slide.swiper .swiper-button-next, .js-paper-slide.swiper .swiper-button-next{ background-image: url("/wp-content/themes/i-dent/assets/images/ico_next.svg")} .js-cus-slide.swiper .swiper-pagination, .js-paper-slide.swiper .swiper-pagination{ position: static; display: flex; align-items: center; justify-content: center; height: 8px; margin-top: 30px} .js-cus-slide.swiper .swiper-pagination-bullet, .js-paper-slide.swiper .swiper-pagination-bullet{ width: 8px; height: 8px; margin: 0 2px !important; background: #025899; opacity: 1; transition: width 0.3s ease} .js-cus-slide.swiper .swiper-pagination-bullet-active, .js-paper-slide.swiper .swiper-pagination-bullet-active{ width: 29px; border-radius: 50px; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%)} @media screen and (min-width: 992px){ .js-cus-slide.swiper, .js-paper-slide.swiper{ width: calc(100% + 46px); margin-left: -23px} .js-paper-slide.swiper{ padding-top: 50px; padding-bottom: 50px}} @media screen and (min-width: 1301px){ .js-cus-slide.swiper .cus-name{ font-size: 21px}} @media screen and (min-width: 768px) and (max-width: 991.98px){ .js-cus-slide.swiper{ width: calc(100% - 60px); margin-left: 30px} .js-paper-slide.swiper{ width: calc(100% - 34px); margin-left: 17px}} @media screen and (max-width: 767.98px){ section.m-paper> .wrapper> .ttl-primary{ font-size: 19px} .js-cus-slide.swiper, .js-paper-slide.swiper{ width: calc(100% + 6px); margin-left: -3px} .js-cus-slide.swiper .swiper-pagination, .js-paper-slide.swiper .swiper-pagination{ height: 6px; margin-top: 12px} .js-cus-slide.swiper .swiper-pagination-bullet, .js-paper-slide.swiper .swiper-pagination-bullet{ width: 6px; height: 6px} .js-cus-slide.swiper .swiper-pagination-bullet-active, .js-paper-slide.swiper .swiper-pagination-bullet-active{ width: 21px}} .mfp-bg{ top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8} .mfp-wrap{ top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden} .mfp-container{ text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box} .mfp-container:before{ content: ""; display: inline-block; height: 100%; vertical-align: middle} .mfp-align-top .mfp-container:before{ display: none} .mfp-content{ position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045} .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content{ width: 100%; cursor: auto} .mfp-ajax-cur{ cursor: progress} .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close{ cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out} .mfp-zoom{ cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in} .mfp-auto-cursor .mfp-content{ cursor: auto} .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter{ -webkit-user-select: none; -moz-user-select: none; user-select: none} .mfp-loading.mfp-figure{ display: none} .mfp-hide{ display: none !important} .mfp-preloader{ color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044} .mfp-preloader a{ color: #CCC} .mfp-preloader a:hover{ color: #FFF} .mfp-s-ready .mfp-preloader{ display: none} .mfp-s-error .mfp-content{ display: none} button.mfp-close, button.mfp-arrow{ overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation} button::-moz-focus-inner{ padding: 0; border: 0} .mfp-close{ width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace} .mfp-close:hover, .mfp-close:focus{ opacity: 1} .mfp-close:active{ top: 1px} .mfp-close-btn-in .mfp-close{ color: #333} .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{ color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%} .mfp-counter{ position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap} .mfp-arrow{ position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent} .mfp-arrow:active{ margin-top: -54px} .mfp-arrow:hover, .mfp-arrow:focus{ opacity: 1} .mfp-arrow:before, .mfp-arrow:after{ content: ""; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent} .mfp-arrow:after{ border-top-width: 13px; border-bottom-width: 13px; top: 8px} .mfp-arrow:before{ border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7} .mfp-arrow-left{ left: 0} .mfp-arrow-left:after{ border-right: 17px solid #FFF; margin-left: 31px} .mfp-arrow-left:before{ margin-left: 25px; border-right: 27px solid #3F3F3F} .mfp-arrow-right{ right: 0} .mfp-arrow-right:after{ border-left: 17px solid #FFF; margin-left: 39px} .mfp-arrow-right:before{ border-left: 27px solid #3F3F3F} .mfp-iframe-holder{ padding-top: 40px; padding-bottom: 40px} .mfp-iframe-holder .mfp-content{ line-height: 0; width: 100%; max-width: 900px} .mfp-iframe-holder .mfp-close{ top: -40px} .mfp-iframe-scaler{ width: 100%; height: 0; overflow: hidden; padding-top: 56.25%} .mfp-iframe-scaler iframe{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000} img.mfp-img{ width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto} .mfp-figure{ line-height: 0} .mfp-figure:after{ content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444} .mfp-figure small{ color: #BDBDBD; display: block; font-size: 12px; line-height: 14px} .mfp-figure figure{ margin: 0} .mfp-bottom-bar{ margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto} .mfp-title{ text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px} .mfp-image-holder .mfp-content{ max-width: 100%} .mfp-gallery .mfp-image-holder .mfp-figure{ cursor: pointer} @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px){ .mfp-img-mobile .mfp-image-holder{ padding-left: 0; padding-right: 0} .mfp-img-mobile img.mfp-img{ padding: 0} .mfp-img-mobile .mfp-figure:after{ top: 0; bottom: 0} .mfp-img-mobile .mfp-figure small{ display: inline; margin-left: 5px} .mfp-img-mobile .mfp-bottom-bar{ background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box} .mfp-img-mobile .mfp-bottom-bar:empty{ padding: 0} .mfp-img-mobile .mfp-counter{ right: 5px; top: 3px} .mfp-img-mobile .mfp-close{ top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0}} @media all and (max-width: 900px){ .mfp-arrow{ -webkit-transform: scale(0.75); transform: scale(0.75)} .mfp-arrow-left{ -webkit-transform-origin: 0; transform-origin: 0} .mfp-arrow-right{ -webkit-transform-origin: 100%; transform-origin: 100%} .mfp-container{ padding-left: 6px; padding-right: 6px}} form label{ cursor: pointer} .c-header_nav .btn-search .m-input{ position: absolute; width: 0; opacity: 0; right: -10px; top: -8px; padding-right: 35px; transition: 0.3s ease} .c-header_nav .btn-search.is-active .m-input{ width: 300px; opacity: 1} @media screen and (max-width: 991.98px){ .c-header_nav .nav-wrap .m-btn{ position: relative; margin: 0 auto} .c-header_nav .nav-wrap .m-btn a{ font-size: 18px; height: 35px} .c-header_nav .btn-search .m-input{ position: relative; right: 0; width: 100%; opacity: 1; top: auto; height: 40px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25); border-radius: 20px; border: 0.5px solid #535353; padding-right: 50px}} .modal-contact .inner .m-btn{ margin-bottom: 13px; margin-top: 34px} .modal-contact .inner .m-btn a{ width: 100%; font-size: 18px; height: 40px} .m-btn a, .m-btn button, .m-btn .submit-button{ display: inline-flex; font-weight: 700; font-size: 22px; line-height: 33px; color: #025899; height: 42px; align-items: center; justify-content: center; padding: 0 32px; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); border-radius: 20px; border: none; text-wrap: nowrap} .m-btn.is-reverse a{ background: #025899; color: #fff} .m-btn.is-small a{ font-size: 15px !important; line-height: 22px !important} @media screen and (min-width: 768px){ .m-btn a:hover, .m-btn button:hover{ background: #025899; color: #fff} .m-btn.is-reverse a:hover{ background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); color: #025899}} @media screen and (max-width: 767px){ .m-btn a, .m-btn button{ font-size: 16px; height: 35px} .m-btn .submit-button{ font-size: 16px}} .m-input{ background: #ffffff; border: 1px solid #025899; border-radius: 30px; height: 34px; font-size: 18px; line-height: 27px; color: #2b2b2b; padding: 0 17px; appearance: none; box-shadow: none; width: 100%} .m-contact form{ text-align: center} @media screen and (max-width: 767px){ .m-contact .m-btn button{ width: 100%}} .form-reserve{ background: #025899; border: 1px solid #025899; border-radius: 20px 20px; overflow: hidden} .form-reserve .f-title{ text-align: center; color: #fff; font-size: 22px; line-height: 33px; padding: 12px 0px 7px} .form-reserve .f-title strong{ display: block; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; margin-top: 2px} .form-reserve .form-inner{ background: url(../images/bg_form.jpg) no-repeat left top/cover; padding: 34px 63px 25px} .form-reserve .form-inner .row{ margin-bottom: 20px} .form-reserve .form-inner .gr-check .ttl{ display: block; font-size: 18px; line-height: 27px; color: #025899; margin-bottom: 13px} .form-reserve .l-checkbox{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px 0; width: 100%; margin-bottom: 30px} .form-reserve .l-checkbox> li{ width: 50%} .form-reserve .m-btn button{ width: 100%; cursor: pointer; height: 50px; border-radius: 30px} @media screen and (max-width: 767px){ .form-reserve .f-title{ font-size: 16px; line-height: 1.5} .form-reserve .form-inner{ padding: 15px} .form-reserve .l-checkbox{ flex-direction: column} .form-reserve .l-checkbox> li{ width: 100%}} .form-ct{ max-width: 656px; margin: 0 auto; border-radius: 20px; overflow: hidden} .form-ct .head{ text-align: center; font-size: 22px; line-height: 33px; font-weight: bold; color: #fff; padding: 12px 5px 12px; background: #025899} .form-ct .body{ padding: 8px 75px 18px; border: 1px solid #025899; border-radius: 0 0 30px 30px} .form-ct .body .text{ color: #025899; margin-bottom: 22px; text-align: center} .form-ct .body .row{ margin-bottom: 16px} .form-ct .body .m-btn{ text-align: center} .form-ct .body .m-btn button{ height: 35px; font-size: 18px} .form-ct.is-rev{ max-width: 100%; background: #025899} .form-ct.is-rev .head{ background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); color: #025899} .form-ct.is-rev .body .text{ color: #fff} @media screen and (max-width: 767px){ .form-ct .body{ padding-left: 20px; padding-right: 20px}} .m-select{ background: #fff url("../images/ico_select.svg") no-repeat right 19px center} .l-news_item .info .m-btn a{ height: 33px; font-size: 18px; font-weight: normal} .l-items_block .m-btn{ text-align: center} .form-support{ display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); border-radius: 30px; padding: 10px 44px; margin-bottom: 30px} .form-support .title{ font-size: 22px; font-weight: bold; line-height: 33px; color: #025899} .form-support .m-input{ width: 365px; max-width: 100%; margin: 0} .form-support .btn-sub{ appearance: none; font-weight: 700; font-size: 22px; line-height: 33px; color: #ffffff; padding: 0 19px; background: #025899; border-radius: 20px; box-shadow: none; border: none; cursor: pointer} @media screen and (max-width: 960px){ .form-support{ flex-direction: column; gap: 10px; border-radius: 20px; background: #025899; padding: 75px 30px 20px; position: relative; overflow: hidden; max-width: 600px; margin-left: auto; margin-right: auto} .form-support .m-input{ width: 100%} .form-support .title{ background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); color: #025899; font-size: 20px; line-height: 30px; width: 100%; position: absolute; top: 0; left: 0; text-align: center; padding: 12px 0} .form-support .btn-sub{ width: 100%; font-size: 18px; height: 40px; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); border-radius: 20px; color: #025899; margin-top: 15px}} @media screen and (max-width: 767px){ .m-doctors .l-doctors .m-btn{ text-align: center}} @media screen and (max-width: 991.98px){ .m-video .m-btn{ text-align: center}} .m-customer_item .info .m-btn{ text-align: center} .m-customer_item .info .m-btn a{ height: 33px; font-weight: normal; font-size: 18px; padding-top: 2px} @media screen and (max-width: 767px){ .m-customer_item .info .m-btn a{ font-weight: bold}} .m-paper_btn .m-btn{ text-align: center} .m-paper_btn .m-btn a{ height: 33px; font-weight: normal; font-size: 18px} .m-kienthuc .l-news_item .info .m-btn a{ font-size: 15px} .box-doctor .m-btn a{ padding-left: 0; padding-right: 0; width: 100%; height: 25px; font-weight: normal} @media screen and (max-width: 767px){ .box-doctor .m-btn a{ width: 115px}} .l-ekip_item .info .m-btn a{ font-weight: normal; width: 115px; padding-left: 5px; padding-right: 5px; height: 30px} .l-trust_item .m-btn{ text-align: center; margin-top: 20px} .l-trust_item .m-btn a{ font-size: 18px; height: 34px} @media screen and (max-width: 991.98px){ .l-doctors_info_inner .m-btn{ text-align: center; order: 1; margin-top: 20px}} .box-phacdo .m-btn{ text-align: center; margin-bottom: 18px} .l-uudai_item .body .m-btn{ text-align: center; margin-top: 20px} .l-uudai_item .body .m-btn a{ font-size: 18px; line-height: 27px; height: 34px} @media screen and (max-width: 767px){ .l-uudai_item .body .m-btn{ margin-top: 10px} .l-uudai_item .body .m-btn a{ font-size: 16px; padding: 0 16px}} .l-faq_item .m-btn a{ font-size: 15px; line-height: 22px; height: 30px; padding: 0 2px; min-width: 79px} @media screen and (max-width: 767px){ .l-faq_item .m-btn{ position: absolute; bottom: 20px; right: 18px} .l-faq_item .m-btn a{ font-weight: normal}} .p-all-in .box-phacdo_inner .m-btn{ margin-top: 40px} .box-khuyencao .m-btn{ margin-top: 40px} .box-khuyencao .m-btn a{ height: 34px; font-size: 18px} @media screen and (max-width: 767px){ .box-khuyencao .m-btn{ text-align: center; margin-top: 30px}} @media screen and (max-width: 767px){ .m-intro .explant .m-btn{ text-align: center}} .l-bra-price_item .m-btn{ text-align: center; margin-top: 3px} .l-bra-price_item .m-btn a{ font-size: 18px; height: 34px} @media screen and (max-width: 767px){ .l-bra-price_item .m-btn a{ width: 100%; padding-left: 0; padding-right: 0}} @media screen and (max-width: 1199.98px){ .form-support .title{ font-size: 18px} .form-support .m-input{ width: 300px}} @media screen and (max-width: 991.98px) and (min-width: 768px){ .c-header_book.is-sp, .btn-close.is-sp, .m-btn.is-sp, .overlay.is-sp{ display: block !important}}:root{ --font-pri: "Inter", sans-serif; --header-height-desktop: 10.3rem; --header-height-mb: 10.5rem} .modal-contact{ width: min(100%, 56rem); margin: 0 auto} .modal-contact .wpcf7, .modal-contact form{ margin: 0} .modal-contact .inner{ position: relative; overflow: visible; text-align: center; margin: 4.8rem auto 0; padding: 6.8rem 2rem 3.4rem; max-width: 56rem; border-radius: 2.8rem; background: linear-gradient(180deg, #0d6ab7 0%, #025899 100%); border: 0.1rem solid rgba(255, 255, 255, 0.22); box-shadow: 0 2.4rem 5rem rgba(2, 88, 153, 0.28)} .modal-contact .inner::before{ content: ""; position: absolute; inset: auto auto -40% -15%; width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none} .modal-contact .inner> .icon, .modal-contact .inner> svg.icon{ position: absolute; top: 0; left: 50%; display: block; width: 9.6rem; height: 9.6rem; transform: translate(-50%, -50%)} .modal-contact .inner> .icon img, .modal-contact .inner> .icon svg, .modal-contact .inner> svg.icon{ display: block; width: 100%; height: 100%; object-fit: contain} .modal-contact .inner .title{ margin: 0 0 0.8rem; color: #fff; font-size: 1.7rem; font-weight: 700; line-height: 1.45; letter-spacing: 0.04em; text-transform: uppercase} .modal-contact .inner strong{ display: block; margin-bottom: 1.2rem; font-size: clamp(2.4rem, 3vw, 3.2rem); line-height: 1.25; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text} .modal-contact .inner .text{ margin: 0 auto 2rem; max-width: 42rem; color: #fff; font-size: 1.5rem; line-height: 1.6} .modal-contact .inner .text:last-of-type{ margin-top: 1.4rem; margin-bottom: 0; font-size: 1.3rem; color: rgba(255, 255, 255, 0.82)} .modal-contact .inner .m-btn + .text{ margin-top: 1.6rem; margin-bottom: 0; max-width: 36rem; font-size: 1.3rem; line-height: 1.45; position: relative; z-index: 1} .modal-contact .inner .row{ display: block; margin: 0 0 1.2rem; height: auto} .modal-contact .inner .wpcf7-form-control-wrap{ display: block; width: 100%} .modal-contact .inner .m-input, .modal-contact .inner input[type=text], .modal-contact .inner input[type=tel], .modal-contact .inner input[type=email], .modal-contact .inner select, .modal-contact .inner textarea{ width: 100%; min-height: 4.8rem; padding: 0 1.8rem; color: #153f68; font-size: 1.6rem; line-height: 1.5; border-radius: 999px; background-color: #fff; border: 0.1rem solid rgba(2, 88, 153, 0.22); box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none} .modal-contact .inner textarea{ min-height: 12rem; padding-top: 1.4rem; padding-bottom: 1.4rem; border-radius: 2rem; resize: vertical} .modal-contact .inner select, .modal-contact .inner select.m-input, .modal-contact .inner .m-select{ padding-right: 4.8rem; background: #fff url("/wp-content/themes/i-dent/assets-v2/images/ico_select.svg") no-repeat right 1.8rem center/1.2rem auto} .modal-contact .inner .m-input::placeholder, .modal-contact .inner input::placeholder, .modal-contact .inner textarea::placeholder{ color: rgba(21, 63, 104, 0.72)} .modal-contact .inner .m-input:focus, .modal-contact .inner input:focus, .modal-contact .inner select:focus, .modal-contact .inner textarea:focus{ outline: none; border-color: #dfaa23; box-shadow: 0 0 0 0.3rem rgba(223, 170, 35, 0.18)} .modal-contact .inner .m-btn{ margin-top: 1.8rem} .modal-contact .m-btn button, .modal-contact .m-btn input[type=submit], .modal-contact .m-btn .wpcf7-submit{ display: inline-flex; width: 100%; min-height: 4.8rem; padding: 0.8rem 2.4rem; align-items: center; justify-content: center; color: #025899; font-size: 1.8rem; font-weight: 700; line-height: 1.4; border: none; cursor: pointer; border-radius: 999px; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.12)} .modal-contact .wpcf7-response-output{ margin: 1.6rem 0 0 !important; padding: 0 !important; border: 0 !important; color: #fff !important; text-align: center !important; font-size: 1.3rem; line-height: 1.5} .modal-contact .wpcf7-not-valid-tip{ margin-top: 0.6rem; font-size: 1.2rem; text-align: left; color: #ffe39b} .iframe-modal .mfp-wrap{ position: fixed !important; top: 0 !important; overflow: auto} .iframe-modal .mfp-bg{ background: rgba(4, 17, 32, 0.76); opacity: 1} .iframe-modal .mfp-container{ padding: 2.4rem 1.6rem} .iframe-modal .mfp-inline-holder .mfp-content{ width: 100%; max-width: 56rem; vertical-align: middle} .iframe-modal .mfp-content{ position: unset} .iframe-modal button.mfp-close{ top: 1.2rem; right: 1.2rem; width: 4rem; height: 4rem; opacity: 1; border-radius: 50%; text-indent: -9999px; background: rgba(255, 255, 255, 0.14) url("/wp-content/themes/i-dent/assets-v2/images/btn_close.svg") no-repeat center/1.4rem 1.4rem} #popup_dynamic{ position: relative; width: min(100%, 56rem); margin: 0 auto} #popup_dynamic .iframe-modal button.mfp-close{ top: -5rem; right: 0} @media screen and (min-width: 768px){ .modal-contact .inner{ padding: 7.6rem 4rem 3.8rem; height: 55rem} .modal-contact .inner> .icon, .modal-contact .inner> svg.icon{ width: 10.6rem; height: 10.6rem} .modal-contact .inner .title{ font-size: 1.9rem} .modal-contact .inner .text{ font-size: 1.6rem}} @media screen and (max-width: 767.98px){ .modal-contact .inner{ margin-top: 3.2rem; padding: 4.8rem 1.6rem 2.4rem; border-radius: 2rem} .modal-contact .inner> .icon, .modal-contact .inner> svg.icon{ width: 7.2rem; height: 7.2rem} .modal-contact .inner .title{ font-size: 1.4rem} .modal-contact .inner strong{ margin-bottom: 1rem; font-size: 1.9rem; line-height: 1.25} .modal-contact .inner .text{ margin-bottom: 1.2rem; font-size: 1.35rem; line-height: 1.55} .modal-contact .inner .text:last-of-type{ margin-top: 1rem; font-size: 1.15rem; line-height: 1.45} .modal-contact .inner .m-btn + .text{ margin-top: 1.2rem; max-width: 30rem; font-size: 1.15rem; line-height: 1.4} .modal-contact .inner .row{ margin-bottom: 1rem} .modal-contact .inner .m-input, .modal-contact .inner input[type=text], .modal-contact .inner input[type=tel], .modal-contact .inner input[type=email], .modal-contact .inner select, .modal-contact .inner textarea{ min-height: 4.2rem; font-size: 1.4rem; padding-left: 1.6rem; padding-right: 1.6rem} .modal-contact .inner select, .modal-contact .inner select.m-input, .modal-contact .inner .m-select{ padding-right: 4rem; background-position: right 1.4rem center} .modal-contact .m-btn button, .modal-contact .m-btn input[type=submit], .modal-contact .m-btn .wpcf7-submit{ min-height: 4.2rem; font-size: 1.6rem} .modal-contact .inner .m-btn{ margin-top: 1.2rem} .iframe-modal .mfp-container{ padding: 1.2rem 1rem} .iframe-modal .mfp-inline-holder .mfp-content{ max-width: 42rem; max-height: calc(100dvh - 2.4rem); overflow-y: auto} .iframe-modal button.mfp-close{ top: 0.4rem; right: 0.4rem; width: 3.6rem; height: 3.6rem; background-size: 1.2rem 1.2rem}} @media screen and (max-width: 767.98px) and (max-height: 760px){ .modal-contact .inner{ margin-top: 2.6rem; padding-top: 4.4rem; padding-bottom: 2rem} .modal-contact .inner> .icon, .modal-contact .inner> svg.icon{ width: 6.6rem; height: 6.6rem} .modal-contact .inner strong{ font-size: 1.8rem} .modal-contact .inner .text{ font-size: 1.3rem} .modal-contact .inner .m-input, .modal-contact .inner input[type=text], .modal-contact .inner input[type=tel], .modal-contact .inner input[type=email], .modal-contact .inner select, .modal-contact .inner textarea, .modal-contact .m-btn button, .modal-contact .m-btn input[type=submit], .modal-contact .m-btn .wpcf7-submit{ min-height: 4rem}} .flag-lang-dropdown{ position: relative; user-select: none; border-radius: 2rem; padding: 0.9rem 1.6rem; background-color: #fff; border: 0.1rem solid rgba(77, 77, 77, 0.4)} .flag-lang-dropdown__trigger{ width: 100%; margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 0.6rem; font: inherit; color: inherit; cursor: pointer; text-align: left; user-select: none; appearance: none; background: transparent; -webkit-appearance: none} .flag-lang-dropdown__selected{ display: flex} .flag-lang-dropdown__selected, .flag-lang-dropdown__flag{ width: 2.4rem; height: 1.6rem; display: inline-block; overflow: hidden; position: relative; flex: 0 0 2.4rem; border-radius: 0.2rem; background-color: #f0f0f0; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1)} .flag-lang-dropdown__flag::before, .flag-lang-dropdown__flag::after{ top: 50%; left: 50%; line-height: 1; position: absolute; transform: translate(-50%, -50%)} .flag-lang-dropdown__flag[data-flag=vn]{ background: #da251d} .flag-lang-dropdown__flag[data-flag=vn]::before{ content: "★"; color: #ff0; font-size: 1rem} .flag-lang-dropdown__flag[data-flag=us]{ background-image: linear-gradient(#3c3b6e 0 0), repeating-linear-gradient(to bottom, #b22234 0 7.69%, #fff 7.69% 15.38%); background-position: left top, center; background-size: 42% 54%, 100% 100%} .flag-lang-dropdown__flag[data-flag=au]{ background: #012169} .flag-lang-dropdown__flag[data-flag=au]::before{ content: "✦"; color: #fff; font-size: 0.9rem; left: 72%; top: 62%} .flag-lang-dropdown__flag[data-flag=ca]{ background: linear-gradient(to right, #f00 0 25%, #fff 25% 75%, #f00 75% 100%)} .flag-lang-dropdown__flag[data-flag=ca]::before{ content: "✦"; color: #f00; font-size: 0.8rem} .flag-lang-dropdown__flag[data-flag=gb]{ background-color: #012169; background-image: linear-gradient(34deg, transparent 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, transparent 58%), linear-gradient(146deg, transparent 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, transparent 58%), linear-gradient(to right, transparent 40%, #fff 40% 60%, transparent 60%), linear-gradient(to bottom, transparent 34%, #fff 34% 66%, transparent 66%), linear-gradient(to right, transparent 45%, #c8102e 45% 55%, transparent 55%), linear-gradient(to bottom, transparent 42%, #c8102e 42% 58%, transparent 58%)} .flag-lang-dropdown__flag[data-flag=fr]{ background: linear-gradient(to right, #002395 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66% 100%)} .flag-lang-dropdown__flag[data-flag=de]{ background: linear-gradient(to bottom, #000 0 33.33%, #dd0000 33.33% 66.66%, #ffcc00 66.66% 100%)} .flag-lang-dropdown__flag[data-flag=other]{ border: 0.1rem solid #999; background: #f0f0f0} .flag-lang-dropdown__flag[data-flag=other]::before{ content: "?"; color: #666; font-weight: 700; font-size: 1.1rem} .flag-lang-dropdown__arrow{ transition: transform 0.2s ease; flex-shrink: 0} .flag-lang-dropdown.is-open .flag-lang-dropdown__arrow{ transform: rotate(180deg)} .flag-lang-dropdown__list{ display: none; position: absolute; top: 100%; left: 0; z-index: 100; min-width: 18rem; max-height: 26rem; overflow-y: auto; margin-top: 0.4rem; padding: 0.4rem 0; background: #fff; border: 0.1rem solid #ddd; border-radius: 0.6rem; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1)} @media screen and (max-width: 576px){ .flag-lang-dropdown__list{ max-height: min(26rem, 40vh); overflow-y: auto; -webkit-overflow-scrolling: touch}} .flag-lang-dropdown.is-open .flag-lang-dropdown__list{ display: block} .flag-lang-dropdown__item{ width: 100%; margin: 0; padding: 0.8rem 1.2rem; border: 0; display: flex; align-items: center; gap: 0.8rem; font: inherit; color: #333; text-decoration: none; font-size: 1.4rem; cursor: pointer; text-align: left; appearance: none; background: transparent; -webkit-appearance: none; transition: background 0.15s ease} .flag-lang-dropdown__item:hover{ background: #f5f5f5} .flag-lang-dropdown__select{ display: none !important} .form-group:has(.flag-lang-dropdown) .form-box{ flex: 1} body.no-scroll-popup{ overflow: hidden; touch-action: none; overscroll-behavior: none} body.uses-v2-shell .header, body.uses-v2-shell .footer, body.uses-v2-shell .popup, body.uses-v2-shell #contact-menu{ font-family: var(--font-pri)} body.uses-v2-shell .SiteMain{ min-height: calc(100vh - var(--v2-shell-footer-height, 0px)); padding-top: var(--v2-shell-header-offset, var(--header-height-desktop))} @media screen and (max-width: 1200px){ body.uses-v2-shell .SiteMain{ padding-top: var(--v2-shell-header-offset, var(--header-height-mb))}} body.uses-v2-shell.admin-bar .header{ top: 3.2rem} @media screen and (max-width: 782px){ body.uses-v2-shell.admin-bar .header{ top: 4.6rem}} .header .container, .footer .container{ width: 100%; height: 100%; margin: 0 auto; padding: 0 1.6rem; max-width: 128.4rem; box-sizing: border-box} .header .custom-logo-link, .footer .custom-logo-link{ display: block; user-select: none} .header .custom-logo-link img, .footer .custom-logo-link img{ width: 100%; height: auto; display: block; object-fit: cover} .header .title-22, .footer .title-22, .popup .title-22{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .header .title-22, .footer .title-22, .popup .title-22{ font-size: 2rem}} @media only screen and (max-width: 800px){ .header .title-22, .footer .title-22, .popup .title-22{ font-size: 2rem}} .header .text-10{ font-size: 1rem} .header .text-14{ font-size: 1.4rem} .header .text-16, .footer .text-16, .popup .text-16{ font-size: 1.6rem} @media only screen and (max-width: 800px){ .header .text-16, .footer .text-16, .popup .text-16{ font-size: 1.4rem}} .footer .text-18, .popup .text-18{ font-size: 1.8rem} @media only screen and (max-width: 1200px){ .footer .text-18, .popup .text-18{ font-size: 1.6rem}} .header .fw-b, .footer .fw-b, .popup .fw-b{ font-weight: 700} .header .fw-m, .footer .fw-m, .popup .fw-m{ font-weight: 500} .header .t-up, .footer .t-up, .popup .t-up{ text-transform: uppercase} .header .hover-border, .footer .hover-border{ position: relative} @media screen and (min-width: 1201px){ .header .hover-border:hover::after, .footer .hover-border:hover::after{ left: 0; width: 100%}} .header .hover-border::after, .footer .hover-border::after{ content: ""; right: 0; bottom: -0.2rem; width: 0; height: 0.1rem; position: absolute; transition: 0.4s ease-in-out} .header .hover-border::after{ background-color: #025899} .footer .hover-border::after{ background-color: #fff} .header{ top: 0; left: 0; z-index: 99; width: 100%; position: fixed; isolation: isolate; transition: 0.4s ease-in-out; background-color: #fff} .header.is-fixed{ box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16)} .header.is-hidden{ transform: translateY(-12rem)} .header-wrap_top{ gap: 2rem; padding: 1.2rem 0; min-height: 4.8rem; display: flex; align-items: center} @media screen and (max-width: 1200px){ .header-wrap_top{ gap: 1.2rem; justify-content: flex-end} .header-wrap_top> .header-wrap_calendar, .header-wrap_top> .custom-logo-link{ display: none}} .header-wrap_news{ flex: 1 1 auto; min-width: 0} .header-wrap_news ul{ gap: 1.6rem; min-height: 2rem; display: flex; flex-wrap: wrap; align-items: center; list-style: none} .header-wrap_news ul .text-14{ color: #025899; display: inline-flex; min-height: 2rem; align-items: center; line-height: 140%; transition: 0.4s ease-in-out} @media screen and (max-width: 1200px){ .header-wrap_search{ display: none}} .header-wrap_search form .form-wrap, .header-wrap_search form .form-group{ margin: 0; display: block} .header-wrap_search form .form-label{ gap: 0.4rem; display: flex; align-items: center; padding: 0.4rem 1.2rem; border-radius: 3rem; border: 0.1rem solid #979797} .header-wrap_search .search-submit{ width: 1.8rem; height: 1.8rem; padding: 0; border: 0; display: inline-flex; flex: 0 0 1.8rem; line-height: 0; align-items: center; justify-content: center; appearance: none; background: transparent; -webkit-appearance: none} .header-wrap_search .search-submit:focus{ outline: none} .header-wrap_search .search-submit:focus-visible{ outline: 0.2rem solid #025899; outline-offset: 0.2rem; border-radius: 0.4rem} @media screen and (max-width: 1200px){ .header-wrap_search form .form-label{ gap: 0.8rem}} .header-wrap_search form .form-label img{ width: 1.8rem; height: 1.8rem; flex-shrink: 0; object-fit: contain} .header-wrap_search form .form-label input{ width: 100%; height: auto; border: 0; padding: 0; border-radius: 0; font-size: 1.4rem; font-family: var(--font-pri)} .header-wrap_search form .form-label input::placeholder{ color: #025899; line-height: 150%} @media screen and (min-width: 1201px){ .header-wrap_search form .form-label input::placeholder{ font-size: 1.2rem}} @media screen and (max-width: 1200px){ .header-wrap_phone{ display: none}} .header-wrap_lang{ cursor: pointer; position: relative} .header-wrap_lang:hover .header-wrap_lang-list{ opacity: 1; pointer-events: auto} .header-wrap_lang-input{ gap: 1rem; display: flex; align-items: center} .header-wrap_lang-input img, .header-wrap_lang-item img{ width: 3rem; flex-shrink: 0; object-fit: cover} .header-wrap_lang-list{ right: 0; left: auto; top: 100%; opacity: 0; z-index: 5; user-select: none; position: absolute; transition: 0.4s ease-in-out; pointer-events: none; list-style: none} .header-wrap_lang-item{ gap: 1rem; display: flex; align-items: center; padding: 0.4rem 0.8rem; border-radius: 0.8rem; transition: 0.4s ease-in-out; background-color: #fff; box-shadow: 0 1rem 0.7rem 0 rgba(191, 191, 191, 0.25)} @media screen and (min-width: 1201px){ .header-wrap_lang-item:hover{ background-color: #025899} .header-wrap_lang-item:hover .text-16{ color: #fff}} .header-wrap_lang-link{ gap: 0.8rem; display: flex; align-items: center} .header-wrap_lang-code{ margin: 0} .header-wrap_lang .text-16{ color: #025899; line-height: 150%} .header .header-main{ display: flex; isolation: isolate; position: relative; align-items: center} .header .header-main::before{ content: ""; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 46.63%, #dfaa23 100%)} @media screen and (max-width: 1200px){ .header .header-main{ gap: 2.4rem; padding-top: 1.2rem} .header .header-main::before{ background: #025899}} @media screen and (max-width: 400px){ .header .header-main{ gap: 1.2rem}} .header .custom-logo-link{ margin-right: auto; max-width: 16.2rem} @media screen and (max-width: 767px){ .header .custom-logo-link{ max-width: 12rem}} @media screen and (min-width: 1201px){ .header .header-main .custom-logo-link, .header .header-main .header-wrap_calendar{ display: none}} .header-nav{ list-style: none} @media screen and (min-width: 1201px){ .header-nav{ gap: 2rem; padding: 1.02rem 0; display: flex; align-items: center; justify-content: center}} @media screen and (max-width: 1200px){ .header-nav{ left: 100%; bottom: 0; width: 100%; z-index: 101; display: flex; position: fixed; transition: 0.4s ease-in-out; padding: 4.8rem 3.8rem; flex-direction: column; background-color: #025899; top: var(--header-height-mb); height: calc(100dvh - var(--header-height-mb)); box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.05)} .header-nav.is-active{ left: 0}} .header-nav .menu{ display: flex; list-style: none; padding: 0; margin: 0} @media screen and (min-width: 1201px){ .header-nav .menu{ gap: 1.2rem; align-items: center; justify-content: space-between}} @media screen and (min-width: 1201px) and (max-width: 1300px){ .header-nav .menu{ gap: 1rem}} @media screen and (max-width: 1200px){ .header-nav .menu{ width: 100%; flex-wrap: wrap; overflow: hidden auto} .header-nav .menu-item{ width: 100%; padding: 1rem; flex-wrap: wrap}} .header-nav .menu-dropdown{ gap: 0.8rem; position: relative; display: flex; align-items: center} @media screen and (min-width: 1201px){ .header-nav .menu-dropdown:hover img{ transform: rotate(180deg)} .header-nav .menu-dropdown:hover .child{ opacity: 1; pointer-events: auto}} @media screen and (max-width: 1200px){ .header-nav .menu-dropdown::before{ content: ""; right: 0; top: 1.8rem; width: 1.2rem; height: 0.6rem; position: absolute; transition: 0.4s ease-in-out; background-size: contain; background-repeat: no-repeat; background-position: top; background-image: url("/wp-content/themes/i-dent/assets-v2/images/icons/icon-arrow.svg")} .header-nav .menu-dropdown> .menu-link{ width: calc(100% - 1.6rem)}} .header-nav .menu-dropdown.is-active::before, .header-nav .menu-dropdown.is-active> img{ transform: rotate(180deg)} .header-nav .menu-dropdown> img{ transition: 0.4s ease-in-out} @media screen and (max-width: 1200px){ .header-nav .menu-dropdown> img{ display: none}} .header-nav .menu-link{ font-weight: 500; font-size: 1.6rem; line-height: 160%; color: #025899; text-decoration: none} @media screen and (max-width: 1300px){ .header-nav .menu-link{ font-size: 1.5rem}} @media screen and (max-width: 1200px){ .header-nav .menu-link{ width: 100%; color: #fff}} @media screen and (min-width: 1201px){ .header-nav .child{ top: calc(100% + 1.1rem); left: 50%; z-index: 5; opacity: 0; min-width: 15rem; width: max-content; position: absolute; transition: 0.4s ease-in-out; pointer-events: none; list-style: none; padding: 0; box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16); border-radius: 0 0 1rem 1rem; background-color: #fff; transform: translate(-50%, 0)} .header-nav .child::before{ content: ""; top: -1.5rem; left: 0; width: 100%; height: 1.5rem; position: absolute; background-color: transparent}} @media screen and (max-width: 1200px){ .header-nav .child{ width: 100%; display: none; list-style: none; padding: 0}} @media screen and (min-width: 1201px){ .header-nav .child .menu-item:not(:last-child) .menu-link{ border-bottom: 0.1rem solid rgba(77, 77, 77, 0.2)} .header-nav .child .menu-item:last-child .menu-link{ border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem}} .header-nav .child .menu-link{ display: block; text-transform: none; transition: 0.4s ease-in-out} @media screen and (min-width: 1201px){ .header-nav .child .menu-link{ padding: 0.5rem 1rem} .header-nav .child .menu-link:hover{ background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%)}} .header .current-menu-item> .menu-link{ font-weight: 700} .header .overlay{ inset: 0; opacity: 0; z-index: 100; width: 100%; height: 100dvh; position: fixed; visibility: hidden; pointer-events: none; transition: 0.4s ease-in-out; background: rgba(0, 0, 0, 0.6)} .header .overlay.is-active{ opacity: 1; visibility: visible; pointer-events: auto} .header .menu-bar{ display: flex; flex-direction: column; background: none; border: 0; padding: 0; cursor: pointer} @media screen and (min-width: 1201px){ .header .menu-bar{ display: none}} .header .menu-bar> .text-10{ text-align: center; transition: 0.4s ease-in-out; color: #fff; line-height: 210%} .header .menu-bar> span:not(.text-10){ width: 100%; height: 0.4rem; display: block; margin-top: 0.4rem; transition: 0.4s ease-in-out; border-radius: 0.5rem; background-color: #fff} .header .menu-bar> span:first-child{ margin-top: 0} .header .menu-bar.is-active> span:nth-child(1){ transform: translateY(1.2rem) rotate(45deg)} .header .menu-bar.is-active> span:nth-child(2){ opacity: 0} .header .menu-bar.is-active> span:nth-child(3){ transform: translateY(-0.4rem) rotate(-45deg)} .header .menu-bar.is-active> .text-10{ opacity: 0} .header .btn, .footer .btn, .popup .btn{ z-index: 3; color: #fff; cursor: pointer; font-weight: 700; overflow: hidden; column-gap: 1rem; user-select: none; font-size: 1.8rem; text-align: center; line-height: normal; position: relative; width: fit-content; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0.6rem 3.2rem; border-radius: 2rem; transition: 0.4s ease-in-out; font-family: var(--font-pri); background-color: #025899; border: 0.1rem solid transparent; text-decoration: none} @media only screen and (max-width: 1200px){ .header .btn, .footer .btn, .popup .btn{ font-size: 1.6rem}} @media screen and (max-width: 575.98px){ .header .btn, .footer .btn, .popup .btn{ padding: 0.6rem 1.6rem}} .header .btn::after, .footer .btn::after, .popup .btn::after{ content: ""; top: 0; right: 0; width: 0; z-index: -1; height: 100%; position: absolute; transition: 0.4s ease-in-out; background-color: #000} @media screen and (min-width: 1201px){ .header .btn:hover, .footer .btn:hover, .popup .btn:hover{ color: #fff; border-color: #000} .header .btn:hover::after, .footer .btn:hover::after, .popup .btn:hover::after{ left: 0; width: 100%}} .header .btn img, .footer .btn img, .popup .btn img{ width: 1.6rem; height: 1.6rem; transition: 0.4s ease-in-out} .header .btn-pri, .footer .btn-pri, .popup .btn-pri{ color: #025899 !important; background: linear-gradient(90deg, #dfaa23 0.01%, #fbf08d 51.44%, #dfaa23 100%) !important} @media screen and (min-width: 1201px){ .header .btn-pri:hover img, .footer .btn-pri:hover img, .popup .btn-pri:hover img{ filter: brightness(0) invert(1)}} .header .btn-sec, .footer .btn-sec, .popup .btn-sec{ color: #fff !important; background: linear-gradient(270deg, #bd0000 0%, #ff1f1f 100%) !important} @media screen and (min-width: 1201px){ .header .btn-sec:hover img, .footer .btn-sec:hover img, .popup .btn-sec:hover img{ filter: brightness(0) invert(1)}}:root{ --font-pri: "Inter", sans-serif; --header-index: 99; --header-height-desktop: 10.3rem; --header-height-mb: 10.5rem} @media screen and (max-width: 800px){:root{ --header-height-mb: 9.6rem}} .header{ top: 0; left: 0; z-index: 99; width: 100%; height: auto; position: fixed; isolation: isolate; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; background-color: white} .header.is-fixed{ box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16)} .header.is-hidden{ transform: translateY(-12rem)} .header-wrap_top{ gap: 2rem; padding: 1.2rem 0; min-height: 4.8rem; display: flex; align-items: center} @media screen and (max-width: 1200px){ .header-wrap_top{ padding: 0.6rem 0; gap: 1.2rem; justify-content: flex-end} .header-wrap_top> .header-wrap_calendar, .header-wrap_top> .custom-logo-link{ display: none}} .header-wrap_news{ flex: 1 1 auto; min-width: 0} .header-wrap_news ul{ gap: 1.6rem; min-height: 2rem; display: flex; flex-wrap: wrap; align-items: center} .header-wrap_news .text-14{ color: #025899; display: inline-flex; min-height: 2rem; align-items: center; line-height: 140%; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; font-weight: 500; position: relative} .header-wrap_news .text-14:after{ content: ""; width: 0; right: 0; height: 0.1rem; bottom: -0.2rem; position: absolute; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; background-color: #025899} .header-wrap_news .text-14:hover::after{ width: 100%} .header-wrap_news{ gap: 1.6rem; min-height: 2rem; display: flex; flex-wrap: wrap; align-items: center} @media screen and (max-width: 1200px){ .header-wrap_search{ display: none}} .header-wrap_search form .form-label{ gap: 0.4rem; border-radius: 3rem; flex-direction: unset; display: flex; align-items: center; padding: 0.4rem 1.2rem; border: 0.1rem solid #979797} @media screen and (max-width: 1200px){ .header-wrap_search form .form-label{ gap: 0.8rem}} .header-wrap_search form .form-label img{ flex-shrink: 0; object-fit: contain; width: 1.8rem; height: 1.8rem} .header-wrap_search form .form-label input{ border: 0; border: 0; padding: 0; height: auto; border-radius: 0} .header-wrap_search form .form-label input::placeholder{ line-height: 150%; color: #025899} @media screen and (min-width: 1201px){ .header-wrap_search form .form-label input::placeholder{ font-size: 1.2rem}} .header-wrap_search{ position: relative} .header-wrap_search .search-submit{ position: absolute; top: 50%; transform: translateY(-50%); left: 1.2rem} .header-wrap_search input{ padding-left: 3.4rem} .header-wrap_phone{ z-index: 3; flex-shrink: 0; color: white; cursor: pointer; font-weight: 700; overflow: hidden; column-gap: 1rem; user-select: none; font-size: 1.8rem} @media only screen and (max-width: 1200px){ .header-wrap_phone{ font-size: 1.6rem}} .header-wrap_phone{ text-align: center; position: relative; width: fit-content; line-height: normal; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; border-radius: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0.6rem 2.4rem; font-family: var(--font-pri); background-color: #025899; border: 0.1rem solid transparent} @media screen and (min-width: 1201px){ .header-wrap_phone{ padding: 0.6rem 3.2rem} .header-wrap_phone:hover{ color: white; border-color: #000000} .header-wrap_phone:hover::after{ left: 0; width: 100%}} @media screen and (max-width: 575.98px){ .header-wrap_phone{ padding: 0.6rem 1.6rem}} .header-wrap_phone::after{ content: ""; top: 0; right: 0; width: 0; z-index: -1; height: 100%; position: absolute; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; background-color: #000000} .header-wrap_phone{ color: white; background: linear-gradient(270deg, #bd0000 0%, #ff1f1f 100%)} @media screen and (min-width: 1201px){ .header-wrap_phone:hover img{ filter: brightness(0) invert(1)}} .header-wrap_phone span{ line-height: inherit} .header-wrap_phone img{ width: 1.6rem; height: 1.6rem; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out} @media screen and (max-width: 1200px){ .header-wrap_phone{ display: none !important}} .header-wrap_calendar{ z-index: 3; flex-shrink: 0; color: white; cursor: pointer; font-weight: 700; overflow: hidden; column-gap: 1rem; user-select: none; font-size: 1.8rem} @media only screen and (max-width: 1200px){ .header-wrap_calendar{ font-size: 1.6rem}} .header-wrap_calendar{ text-align: center; position: relative; width: fit-content; line-height: normal; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; border-radius: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0.6rem 2.4rem; font-family: var(--font-pri); background-color: #025899; border: 0.1rem solid transparent} @media screen and (min-width: 1201px){ .header-wrap_calendar{ padding: 0.6rem 3.2rem} .header-wrap_calendar:hover{ color: white; border-color: #000000} .header-wrap_calendar:hover::after{ left: 0; width: 100%}} @media screen and (max-width: 575.98px){ .header-wrap_calendar{ padding: 0.6rem 1.6rem; font-size: 1.4rem; height: fit-content}} .header-wrap_calendar::after{ content: ""; top: 0; right: 0; width: 0; z-index: -1; height: 100%; position: absolute; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; background-color: #000000} .header-wrap_calendar{ color: #025899; background: linear-gradient(90deg, #dfaa23 0.01%, #fbf08d 51.44%, #dfaa23 100%)} @media screen and (min-width: 1201px){ .header-wrap_calendar:hover img{ filter: brightness(0) invert(1)}} .header-wrap_calendar span{ line-height: inherit} .header-wrap_calendar img{ width: 1.6rem; height: 1.6rem; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out} .header-wrap_lang{ cursor: pointer; position: relative} .header-wrap_lang:hover .header-wrap_lang-list{ opacity: 1; pointer-events: auto} .header-wrap_lang-input{ gap: 1rem; display: flex; align-items: center} .header-wrap_lang-input img{ width: 3rem; flex-shrink: 0; object-fit: cover} .header-wrap_lang-input .text-16{ color: #025899; line-height: 1.5; font-weight: 500; font-size: 1.6rem} @media only screen and (max-width: 800px){ .header-wrap_lang-input .text-16{ font-size: 1.4rem}} .header-wrap_lang-list{ right: 0; left: auto; top: 100%; opacity: 0; z-index: 5; user-select: none; position: absolute; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; pointer-events: none} .header-wrap_lang-item{ gap: 1rem; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; border-radius: 0.8rem; display: flex; align-items: center; padding: 0.4rem 0.8rem; background-color: white; box-shadow: 0 1rem 0.7rem 0 rgba(191, 191, 191, 0.25)} @media screen and (min-width: 1201px){ .header-wrap_lang-item:hover{ background-color: #025899} .header-wrap_lang-item:hover .text-16{ color: white}} .header-wrap_lang-item img{ width: 3rem; flex-shrink: 0; object-fit: cover} .header-wrap_lang-item .text-16{ transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out} .header-wrap_lang-link{ gap: 0.8rem; display: flex; align-items: center} .header-wrap_lang-link .text-16{ color: #025899; line-height: 1.5; margin: 0; transition: 0.4s ease-in-out; font-weight: 700; font-size: 1.6rem} @media only screen and (max-width: 800px){ .header-wrap_lang-link .text-16{ font-size: 1.4rem}} .header-wrap_lang-code{ margin: 0} @media screen and (max-width: 1200px){ .header-main{ gap: 2.4rem; display: flex; isolation: isolate; position: relative; padding: 0.6rem 0; align-items: center} .header-main::before{ content: ""; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; position: absolute; pointer-events: none; transform: translateX(-50%); background-color: #025899}} @media screen and (max-width: 400px){ .header-main{ gap: 1.2rem}} .header-main .custom-logo-link{ display: flex; align-items: center; justify-content: start} @media screen and (min-width: 1201px){ .header-main .custom-logo-link{ display: none}} @media screen and (min-width: 1201px){ .header-main .header-wrap_calendar{ display: none}} .header-main .header-wrap_calendar .btn{ font-size: 1.4rem; flex-direction: row} @media screen and (max-width: 350px){ .header-main .header-wrap_calendar .btn{ font-size: 1.2rem} .header-main .header-wrap_calendar .btn img{ display: none}} @media screen and (min-width: 1201px){ .header-nav{ gap: 2rem; padding: 1.02rem 0; position: relative; display: flex; align-items: center; justify-content: center} .header-nav::before{ content: ""; top: 0; left: 50%; z-index: -1; height: 100%; width: 100vw; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 46.63%, #dfaa23 100%)}} @media screen and (max-width: 1200px){ .header-nav{ left: 100%; bottom: 0; width: 100%; z-index: 101; display: flex; position: fixed; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; padding: 4.8rem 2.8rem; flex-direction: column; background-color: #025899; top: var(--header-height-mb); height: calc(100dvh - var(--header-height-mb)); box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.05)} .header-nav.is-active{ left: 0}} @media screen and (min-width: 1201px){ .header-nav> *{ flex: 1}} .header-nav .menu{ display: flex} @media screen and (min-width: 1201px){ .header-nav .menu{ gap: 1.2rem; align-items: center; justify-content: space-between}} @media screen and (min-width: 1201px) and (max-width: 1300px){ .header-nav .menu{ gap: 1rem}} @media screen and (max-width: 1200px){ .header-nav .menu{ flex-wrap: wrap; overflow: hidden auto; padding-right: 0.8rem}} @media screen and (max-width: 1200px){ .header-nav .menu-item{ width: 100%; padding: 1rem; flex-wrap: wrap}} .header-nav .menu-dropdown{ gap: 0.8rem; position: relative; display: flex; align-items: center} @media screen and (min-width: 1201px){ .header-nav .menu-dropdown:hover img{ transform: rotate(180deg)} .header-nav .menu-dropdown:hover .child{ opacity: 1; pointer-events: auto}} @media screen and (max-width: 1200px){ .header-nav .menu-dropdown::before{ content: ""; right: 0; top: 1.8rem; width: 1.2rem; height: 0.6rem; position: absolute; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; background-size: contain; background-repeat: no-repeat; background-position: top; background-image: url("../../assets-v2/images/common/icon-arrow.svg")}} .header-nav .menu-dropdown.is-active::before, .header-nav .menu-dropdown.is-active img{ transform: rotate(180deg)} @media screen and (max-width: 1200px){ .header-nav .menu-dropdown> .menu-link{ width: calc(100% - 1.6rem)}} .header-nav .menu-dropdown img{ transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out} @media screen and (max-width: 1200px){ .header-nav .menu-dropdown img{ display: none}} .header-nav .menu-link{ font-weight: 500; font-size: 1.6rem; color: #025899; line-height: 160%} @media screen and (max-width: 1300px){ .header-nav .menu-link{ font-size: 1.5rem}} @media screen and (max-width: 1200px){ .header-nav .menu-link{ width: 100%; color: white}} @media screen and (min-width: 1201px){ .header-nav .child{ top: calc(100% + 1.1rem); left: 50%; z-index: 5; opacity: 0; box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16); min-width: 15rem; position: absolute; width: max-content; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; pointer-events: none; border-radius: 0px 0px 10px 10px; background-color: white; transform: translate(-50%, 0)} .header-nav .child::before{ position: absolute; content: ""; background-color: transparent; height: 1.5rem; top: -1.5rem; width: 100%; left: 0}} @media screen and (max-width: 1200px){ .header-nav .child{ width: 100%}} @media screen and (max-width: 1200px){ .header-nav .child .menu-item{ border: 0}} @media screen and (min-width: 1201px){ .header-nav .child .menu-item:not(:last-child) .menu-link{ border-bottom: 0.1rem solid rgba(77, 77, 77, 0.2)}} @media screen and (min-width: 1201px){ .header-nav .child .menu-item:last-child .menu-link{ border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem}} .header-nav .child .menu-link{ display: block; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; text-transform: none} @media screen and (min-width: 1201px){ .header-nav .child .menu-link{ padding: 0.5rem 1rem} .header-nav .child .menu-link:hover{ background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%)}} .header .custom-logo-link{ user-select: none; margin-right: auto; max-width: 16.2rem} @media screen and (max-width: 767px){ .header .custom-logo-link{ max-width: 12rem}} .header .custom-logo-link img{ width: 100%; object-fit: cover} .header-search{ user-select: none; position: relative} .header-search.is-active .menu-search{ opacity: 1; visibility: visible; pointer-events: auto} .header-search .search{ cursor: pointer} .header-search .menu-search{ right: 0; top: 100%; z-index: 5; opacity: 0; width: 100%; min-width: 30rem; position: absolute; visibility: hidden; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; pointer-events: none} .header-search form label{ width: 100%; gap: 0.8rem; border-radius: 2rem; display: flex; align-items: center; padding: 0.8rem 1.6rem; background-color: white; border: 0.02rem solid #4d4d4d} .header-search form input{ border: 0; padding: 0; height: auto; border-radius: 0; background-color: transparent} .header .current-menu-item> .menu-link{ font-weight: 700} .main{ padding-top: var(--header-height-desktop)} body.admin-bar .main{ padding-top: calc(var(--header-height-desktop) + 3.2rem)} @media screen and (max-width: 1200px){ .main{ padding-top: var(--header-height-mb)} body.admin-bar .main{ padding-top: calc(var(--header-height-mb) + 3.2rem)}} @media screen and (max-width: 782px){ body.admin-bar .main{ padding-top: calc(var(--header-height-mb) + 4.6rem)}} .menu-bar{ display: flex; flex-direction: column} @media screen and (min-width: 1201px){ .menu-bar{ display: none}} .menu-bar> span:not(.text-10){ width: 100%; height: 0.4rem; display: block; user-select: none; margin-top: 0.4rem; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out; border-radius: 0.5rem; background-color: white} .menu-bar> span:not(.text-10):first-child{ margin-top: 0} .menu-bar> .text-10{ text-align: center; color: white; font-size: 1rem; line-height: 1; font-weight: 700; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out} @media screen and (max-width: 350px){ .menu-bar> .text-10{ font-size: 0.9rem}} .menu-bar.is-active> span:nth-child(1){ transform: translateY(1.2rem) rotate(45deg)} .menu-bar.is-active> span:nth-child(2){ opacity: 0} .menu-bar.is-active> span:nth-child(3){ transform: translateY(-0.4rem) rotate(-45deg)} .menu-bar.is-active> .text-10{ opacity: 0} #primary-navigation-v2 + .overlay{ display: none !important} .menu-item .gg-chevron-down{ color: #025899; width: 1.2rem; height: 1.2rem; border: 0; margin-top: -0.4rem; transition: all 0.3s ease-in-out} .menu-item .gg-chevron-down::after{ width: 0.8rem; height: 0.8rem} @media screen and (min-width: 1201px){ .menu-item.menu-item-has-children:hover> .gg-chevron-down{ transform: rotate(-180deg); margin-top: 0.4rem}} @media screen and (max-width: 1200px){ body.uses-v2-shell .header .header-main{ padding: 0.6rem 0}} body.uses-v2-shell .header-wrap_search{ width: 23.9rem} body.uses-v2-shell .header-wrap_search input[type=text], body.uses-v2-shell .header-wrap_search input[type=search]{ width: 100%; height: 4rem; padding: 0.8rem 1.6rem 0.8rem 3.4rem; border-radius: 2rem; color: #000000; line-height: 150%; font-size: 1.6rem; font-family: var(--font-pri); border: 0.02rem solid rgba(77, 77, 77, 0.4); background-color: white; outline: 0; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, filter 0.4s ease-in-out} body.uses-v2-shell .header-wrap_search input[type=text]::placeholder, body.uses-v2-shell .header-wrap_search input[type=search]::placeholder{ color: #025899; line-height: 150%; font-size: 1.4rem} body.uses-v2-shell .header-wrap_search input[type=text]:hover, body.uses-v2-shell .header-wrap_search input[type=text]:focus, body.uses-v2-shell .header-wrap_search input[type=search]:hover, body.uses-v2-shell .header-wrap_search input[type=search]:focus{ color: #025899; border-color: #ec1d23} body.uses-v2-shell .header-wrap_search .search-submit{ display: block; height: 1.9rem; line-height: normal} body.uses-v2-shell .header-wrap_search .search-submit img{ display: block} .footer{ overflow: hidden} .footer> .container:not(:has(> .footer-wrap)), .footer .footer-wrap{ gap: 2.4rem; display: flex; flex-direction: column; padding: 4rem 1.6rem; isolation: isolate; position: relative} @media screen and (max-width: 991px){ .footer> .container:not(:has(> .footer-wrap)), .footer .footer-wrap{ padding: 2rem 1.6rem}} .footer> .container:not(:has(> .footer-wrap)){ padding-bottom: 0} .footer> .container:not(:has(> .footer-wrap))::before, .footer .footer-wrap::before{ content: ""; top: 0; left: 50%; width: 100vw; height: 100%; z-index: -1; position: absolute; transform: translateX(-50%); background-color: #025899} .footer> .container:not(:has(> .footer-wrap)) .footer-copyright{ z-index: 0; isolation: isolate; position: relative} .footer> .container:not(:has(> .footer-wrap)) .footer-copyright::before{ content: ""; top: 0; left: 50%; width: 100vw; height: 100%; z-index: -1; position: absolute; transform: translateX(-50%); background-color: #fff} .footer> .container:not(:has(> .footer-wrap)) .footer-mid{ margin-bottom: 0} .footer .footer-top{ gap: 8rem; display: flex; align-items: center; padding-bottom: 2.4rem; border-bottom: 0.1rem solid #fff} @media screen and (max-width: 1280px){ .footer .footer-top{ gap: 4rem}} @media screen and (min-width: 1131px){ .footer .footer-top> *{ flex: 1 0 auto}} @media screen and (max-width: 1130px){ .footer .footer-top_desc{ display: none} .footer .footer-top_action{ display: none !important}} .footer .footer-top_desc .title-22{ color: #fff; line-height: 150%; letter-spacing: 0.022rem} .footer .footer-top_desc{ color: #fff; font-size: 2.2rem; font-weight: 700; line-height: 150%; letter-spacing: 0.022rem; text-transform: uppercase} @media only screen and (max-width: 1200px){ .footer .footer-top_desc{ font-size: 2rem}} .footer .footer-top_action{ gap: 1rem; width: 100%; border: 0; color: #025899; display: inline-flex; font-size: 2.2rem; font-weight: 700; line-height: normal; cursor: pointer; padding: 0.9rem 1.6rem; align-items: center; border-radius: 4rem; justify-content: center; text-transform: uppercase; flex-direction: row-reverse; transition: 0.4s ease-in-out; background: linear-gradient(90deg, #dfaa23 0.01%, #fbf08d 51.44%, #dfaa23 100%)} .footer .footer-top_action.btn{ width: fit-content} @media screen and (min-width: 1131px){ .footer .footer-top_action.btn{ width: 36.72%; flex: 0 0 36.72%}} @media only screen and (max-width: 1200px){ .footer .footer-top_action{ font-size: 2rem}} @media only screen and (max-width: 800px){ .footer .footer-top_action{ font-size: 1.9rem}} .footer .footer-top_action img{ width: 2.4rem; height: 2.4rem} @media screen and (min-width: 1201px){ .footer .footer-top_action:hover{ color: #fff} .footer .footer-top_action:hover img{ filter: brightness(0) invert(1)}} .footer .footer-top .custom-logo-link{ max-width: 24.6rem} .footer .footer-mid{ display: grid; grid-template-columns: 3fr 6fr 3fr; column-gap: 3.2rem; row-gap: 3rem} .footer .footer-mid .footer-box:nth-child(1){ grid-column: 1; grid-row: 1} .footer .footer-mid .footer-box:nth-child(2){ grid-column: 1; grid-row: 2} .footer .footer-mid .footer-box:nth-child(3){ order: 2} .footer .footer-mid .footer-box:nth-child(4){ grid-column: 3; grid-row: 1/span 2} @media screen and (max-width: 1200px){ .footer .footer-mid{ column-gap: 1.2rem}} @media screen and (max-width: 991px){ .footer .footer-mid{ grid-template-columns: 1fr} .footer .footer-mid .footer-box:nth-child(1){ grid-column: 1; grid-row: auto; order: 3} .footer .footer-mid .footer-box:nth-child(2){ grid-column: 1; grid-row: auto; order: 4} .footer .footer-mid .footer-box:nth-child(4){ grid-column: 1; grid-row: auto; order: 2}} .footer .footer-block, .footer .footer-box, .popup .book-form{ display: flex; flex-direction: column} .footer .footer-block{ gap: 3rem} .footer .footer-box{ gap: 1.2rem} @media screen and (max-width: 991px){ .footer .footer-box{ row-gap: 0.6rem}} .popup .book-form{ row-gap: 0.4rem} .popup .book-form> .book-form_title + *{ margin-top: 1.2rem} .popup .book-form> .book-form_title + .book-form_desc{ margin-top: 0} .popup .book-form> .book-form_desc + *{ margin-top: 1.2rem} .footer .footer-box .title-22{ color: #fff; line-height: 150%} @media screen and (max-width: 576px){ .footer .footer-box .title-22{ font-size: 1.8rem}} .footer .footer-right{ row-gap: 6.4rem; --letter-spacing: 3.2rem; display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--letter-spacing))} @media screen and (max-width: 1200px){ .footer .footer-right{ row-gap: 2.4rem; --letter-spacing: 1.2rem}} .footer .footer-right .footer-box{ padding: 0 var(--letter-spacing)} @media screen and (min-width: 768px){ .footer .footer-right .footer-box:first-child{ width: 66.6666666667%} .footer .footer-right .footer-box:last-child{ width: 33.3333333333%}} @media screen and (max-width: 767px){ .footer .footer-right .footer-box{ width: 100%}} .footer .footer-list, .footer .social, .footer .pay, #contact-menu ul{ list-style: none; padding: 0; margin: 0} .footer .footer-list{ display: flex; row-gap: 0.6rem; flex-direction: column} .footer .footer-link{ gap: 1rem; display: flex; width: fit-content; position: relative; color: #fff; font-size: 1.6rem; line-height: 150%; text-decoration: none} @media only screen and (max-width: 800px){ .footer .footer-link{ font-size: 1.4rem}} .footer .footer-link::after{ content: ""; right: 0; width: 0; height: 0.1rem; bottom: -0.2rem; position: absolute; transition: 0.4s ease-in-out; background-color: #fff} @media screen and (min-width: 1201px){ .footer .footer-link:hover::after{ width: 100%}} .footer .footer-link img{ width: 1.6rem; height: 1.6rem; flex-shrink: 0; margin-top: 0.4rem; object-fit: contain} .footer .footer-link .text-16{ color: #fff; line-height: 150%} .footer .footer-link strong, .footer .footer-link .text-16 strong{ font-weight: 700} .footer .footer-group:has(ul), .footer .footer-item:has(> ul){ gap: 2rem; display: flex; flex-wrap: wrap; align-items: center} @media screen and (max-width: 576px){ .footer .footer-group:has(ul), .footer .footer-item:has(> ul){ gap: 0.6rem}} .footer .footer-item:has(> ul)> .footer-link, .footer .footer-group:has(ul) .footer-link{ flex-shrink: 0} .footer .footer-group ul, .footer .footer-item> ul{ width: 100%; display: flex; row-gap: 0.6rem; max-width: 26rem; flex-direction: column} .footer .footer-group ul li, .footer .footer-item> ul li{ display: flex; align-items: center; justify-content: space-between} .footer .footer-group ul li:not(:last-child), .footer .footer-item> ul li:not(:last-child){ padding-bottom: 0.6rem; border-bottom: 0.1rem solid #fff} .footer .footer-group ul .text-16, .footer .footer-item> ul .text-16{ color: #fff; line-height: 150%} .footer .footer-group ul li, .footer .footer-group ul p, .footer .footer-item> ul li, .footer .footer-item> ul p{ color: #fff; font-size: 1.6rem; line-height: 150%} @media only screen and (max-width: 800px){ .footer .footer-group ul li, .footer .footer-group ul p, .footer .footer-item> ul li, .footer .footer-item> ul p{ font-size: 1.4rem}} .footer .footer-copyright{ display: flex; padding: 1rem 0; flex-wrap: wrap; justify-content: space-between} .footer .footer-copyright> *{ color: #025899; line-height: 150%; font-size: 1.6rem} @media only screen and (max-width: 800px){ .footer .footer-copyright> *{ font-size: 1.4rem}} @media screen and (max-width: 576px){ .footer .footer-copyright> *:first-child{ position: relative; margin-bottom: 0.5rem; padding-bottom: 0.5rem} .footer .footer-copyright> *:first-child::after{ content: ""; left: 50%; bottom: 0; width: 100vw; height: 0.1rem; position: absolute; transform: translateX(-50%); background-color: #025899}} .footer .social{ gap: 2rem; display: flex; flex-wrap: wrap; user-select: none} .footer .social-link{ width: 3.2rem; height: 3.2rem; display: block; transition: 0.4s ease-in-out} @media screen and (min-width: 1201px){ .footer .social-link:hover{ transform: translateY(-0.5rem)}} .footer .social-link img{ width: 100%; height: 100%; object-fit: cover} .footer .pay{ gap: 4rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center; user-select: none} @media screen and (max-width: 1200px){ .footer .pay{ gap: 2.4rem 1.2rem}} .footer .pay-item:nth-child(4) .pay-link, .footer .pay> .pay-link:nth-child(4), .footer .pay> img:nth-child(4){ width: 15.8rem; max-width: 15.8rem} @media screen and (max-width: 576px){ .footer .pay-item:nth-child(4) .pay-link, .footer .pay> .pay-link:nth-child(4), .footer .pay> img:nth-child(4){ width: 9.8rem; max-width: 9.8rem}} .footer .pay-item:nth-child(5) .pay-link, .footer .pay> .pay-link:nth-child(5), .footer .pay> img:nth-child(5){ width: 7rem; max-width: 7rem} .footer .pay> img, .footer .pay> li> img, .footer .pay-link{ display: block} .footer .pay> img, .footer .pay> li> img{ height: auto; max-width: 100%; object-fit: contain} .footer .pay-link img{ display: block; width: auto; height: auto; max-width: 100%; object-fit: contain} .footer .pay + .pay li:first-child img{ width: 15.8rem; max-width: 15.8rem} @media screen and (max-width: 576px){ .footer .pay + .pay li:first-child img{ width: 9.8rem; max-width: 9.8rem}} .footer .pay + .pay li:last-child img{ width: 7rem; max-width: 7rem} #contact-menu{ position: fixed; z-index: 10; top: 12rem; right: 1rem; width: 7rem; text-align: center; border-radius: 3.5rem; padding: 2.5rem 0 2rem; background: #fff; box-shadow: 0 1.9rem 3.5rem rgba(0, 0, 0, 0.3), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22)} #contact-menu ul li{ padding: 0.2rem 0} #contact-menu ul li a{ gap: 0.5rem; display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 1rem; color: #0d6799; font-weight: 700; text-decoration: none} #contact-menu ul li a img{ width: 4.5rem; height: 4.5rem; margin: 0 auto; transition: 0.4s ease-in-out} @media screen and (min-width: 1201px){ #contact-menu ul li a:hover img{ transform: scale(1.05)}} #contact-menu .contact-menu__label{ display: block; line-height: 1.2; white-space: nowrap} @media screen and (max-width: 575px){ #contact-menu ul li a img{ width: 3.2rem; height: 3.2rem}} @media screen and (max-width: 991.98px){ #contact-menu{ left: 0; right: auto; top: auto; bottom: 0; width: 100%; padding: 1rem 0 0.1rem; background: #025899; border-radius: 3rem 3rem 0 0} #contact-menu> ul{ display: flex; flex-direction: row} #contact-menu> ul> li{ width: 25%; display: flex; flex-direction: column; gap: 0.5rem} #contact-menu> ul> li a{ color: #fff; font-size: 1.3rem; font-weight: 400}} @media screen and (max-width: 575.98px){ #contact-menu> ul> li a{ font-size: 1.2rem}} .popup{ inset: 0; z-index: 101; position: fixed; visibility: hidden; display: flex; align-items: center; justify-content: center} .popup:has(.popup-contact) .popup-over{ height: auto; background-color: transparent} .popup:has(.book-form) .popup-over{ width: 90%; height: auto; max-width: 77.6rem; background-color: transparent} .popup:has(.popup-contact) .popup-main{ width: 100%; max-width: 77.6rem} .popup.open .popup-overlay{ opacity: 1; visibility: visible} .popup.open{ visibility: visible} .popup.open .popup-main{ opacity: 1; visibility: visible} .popup.open .popup-over{ opacity: 1; visibility: visible} .popup-close{ top: -1rem; right: -1rem; z-index: 5; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; cursor: pointer; position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #000} .popup-close img{ width: 1.6rem; height: 1.6rem; object-fit: cover; filter: brightness(0) invert(1)} .popup-overlay{ inset: 0; z-index: 1; opacity: 0; visibility: hidden; position: absolute; transition: 0.4s ease-in-out; background-color: rgba(0, 0, 0, 0.8)} .popup-main{ top: 50%; left: 50%; z-index: 2; opacity: 0; display: flex; padding: 1.6rem; position: absolute; visibility: hidden; height: fit-content; overflow: hidden auto; flex-direction: column; width: calc(100vw - 20rem); transition: 0.4s ease-in-out; transform: translate(-50%, -50%)} @media screen and (max-width: 1200px){ .popup-main{ width: calc(100vw - 5rem)}} @media screen and (max-width: 576px){ .popup-main{ width: 100vw}} .popup-wrap{ width: 100%; position: relative} .popup-over{ z-index: 1; opacity: 0; width: 90%; margin: auto; position: relative; visibility: hidden; border-radius: 1rem; transition: 0.4s ease-in-out; background-color: #fff; display: flex; align-items: center; justify-content: center} @media screen and (min-width: 768px){ .popup-over{ width: calc(100vw - 20rem)}} .popup .book{ margin-top: 2.4rem; margin-bottom: 6rem} .popup-contact .book{ margin: 0} .popup .book-form{ width: 100%; margin: 0 auto; max-width: 77.6rem; padding: 1.2rem 5.6rem; font-size: 1.6rem; line-height: 150%; border-radius: 1rem; background: linear-gradient(270deg, #96d3f3 0%, #e4f4ff 50.28%, #96d3f3 100%); box-shadow: 0 1rem 0.7rem 0 rgba(191, 191, 191, 0.25)} @media screen and (max-width: 576px){ .popup .book-form{ padding: 2.4rem; border: 0.1rem solid #025899}} .popup-contact .book-form{ max-width: unset; border-radius: 0.8rem} @media screen and (min-width: 577px){ .popup-contact .book-form{ padding: 2.4rem 5.6rem}} .popup .book-form_title, .popup .book-form_desc{ text-align: center; line-height: 130%} .popup .book-form_title{ color: #025899; font-size: 2.2rem; font-weight: 700; text-transform: uppercase} @media only screen and (max-width: 1200px){ .popup .book-form_title{ font-size: 2rem}} @media only screen and (max-width: 800px){ .popup .book-form_title{ font-size: 1.9rem}} @media screen and (max-width: 576px){ .popup .book-form_title{ font-size: 2rem}} .popup .book-form_desc{ font-size: 1.8rem; font-weight: 500} @media only screen and (max-width: 1200px){ .popup .book-form_desc{ font-size: 1.6rem}} .popup .book-form form{ gap: 1.6rem; display: flex; flex-wrap: wrap} .popup .book-form form .wpcf7-form-control-wrap{ width: calc(50% - 0.8rem); margin-top: 1.6rem} @media screen and (max-width: 575px){ .popup .book-form form .wpcf7-form-control-wrap{ width: 100%}} .popup .book-form form .form-action{ margin-top: 0} .popup .book-form form .wpcf7-submit{ color: #025899; background: linear-gradient(90deg, #dfaa23 0.01%, #fbf08d 51.44%, #dfaa23 100%)} .popup form .form-wrap{ display: flex; row-gap: 2.4rem; flex-direction: column} @media screen and (max-width: 767px){ .popup form .form-wrap{ row-gap: 1.6rem}} .popup form .form-group{ gap: 2.4rem; display: flex; align-items: center} .popup form .form-box{ width: calc(50% - 1.2rem)} .popup form .form-group:has(.form-dropdown) .form-box{ width: 100%} .popup form .form-label{ width: 100%; display: flex; row-gap: 0.8rem; flex-direction: column} .popup form .form-text{ color: #000} .popup form .form-text sup{ color: #f00} .popup form .form-action{ width: fit-content; margin: 0 auto; position: relative} .popup form .form-action .wpcf7-spinner{ top: 50%; left: 50%; z-index: 5; margin: 0 auto; position: absolute; transform: translate(-50%, -50%)} .popup form input, .popup form select, .popup form textarea{ outline: 0; width: 100%; font-size: 1.6rem; line-height: 150%; border-radius: 2rem; transition: 0.4s ease-in-out; background-color: #fff; font-family: var(--font-pri); border: 0.02rem solid rgba(77, 77, 77, 0.4)} .popup form input{ height: 4rem; padding: 0.8rem 1.6rem} .popup form textarea{ height: 10rem; resize: none; padding: 0.8rem 1.6rem} .popup form select{ padding: 0.8rem 4.8rem 0.8rem 0.8rem} .popup form input:hover, .popup form input:focus, .popup form input:not(:placeholder-shown), .popup form textarea:hover, .popup form textarea:focus, .popup form textarea:not(:placeholder-shown){ color: #025899; border-color: #dfaa23} @media screen and (min-width: 1201px){ .popup form input::placeholder, .popup form textarea::placeholder{ color: #999; font-size: 1.4rem}} .popup .wpcf7-form-control-wrap{ width: 100%; display: block} .popup .wpcf7-not-valid-tip{ right: 0; z-index: 4; bottom: -2.2rem; color: #fff; padding: 0.4rem; font-size: 1.2rem; width: fit-content; position: absolute; border-radius: 0.5rem; background-color: red} .popup .wpcf7-not-valid-tip::before{ content: ""; width: 0; height: 0; right: 1.6rem; bottom: 100%; position: absolute; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-bottom: 0.5rem solid #ec1f26} .popup .wpcf7-response-output{ color: #ec1f26; border: 0 !important; padding: 0 !important; margin: 2rem 0 0 !important; text-align: center !important} @media screen and (max-width: 1200px){ .popup .wpcf7-response-output{ font-size: 1.4rem !important; margin: 1.2rem 0 0 !important}} .gg-calendar-dates{ box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 18px; height: 18px; border: 2px solid; border-radius: 3px} .gg-calendar-dates::after, .gg-calendar-dates::before{ content: ""; display: block; box-sizing: border-box; position: absolute; border-radius: 3px; height: 2px; left: 2px} .gg-calendar-dates::before{ background: currentColor; width: 2px; box-shadow: 4px 0 0, 8px 0 0, 0 4px 0, 4px 4px 0, 8px 4px 0; top: 6px} .gg-calendar-dates::after{ width: 10px; top: -4px; box-shadow: 0 6px 0 0} .hocvan .l-doctors_info .l-cer-img_wrap, .l-doctors.is-special .l-doctors_info .l-cer-img_wrap, .p-service .l-doctors_info .l-cer-img_wrap, main{ overflow: hidden} .m-input{ appearance: none; box-shadow: none} .key-service .service-slide_item a, .m-paper_wrap{ filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))} .m-article table, .table-common{ border-collapse: collapse} address, article, aside, audio, b, blockquote, body, caption, code, dd, del, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, header, html, i, iframe, img, label, legend, li, mark, nav, object, ol, p, pre, q, section, small, span, strong, sub, table, tbody, td, th, thead, time, tr, ul, var, video{ font-size: 1em; margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box} .is-pc, .l-items_block .price-box dd span, .m-video.is-short .m-video_inner, .v1-answer.is-open, article, aside, details, figcaption, figure, footer, header, main, menu, nav, section{ display: block} html{ font-size: 62.5%} body{ -webkit-text-size-adjust: 100%} body *{ box-sizing: border-box} body, h1, h2, h3, h4, h5, input, option, select, table, textarea{ font-family: Inter, sans-serif; color: #2b2b2b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} .l-address> li p.phone.is-hotline, .m-promo .m-tag .tag, h1, h2, h3, h4, h5{ font-weight: 700} input, option, select, table, textarea{ line-height: 1.1} ol, ul{ list-style: none} blockquote, q{ quotes: none} .l-uudai_item .body .price.old-price, del{ text-decoration: line-through} img{ vertical-align: middle; max-width: 100%; display: inline-block} a{ transition: 0.3s ease-in-out; text-decoration: none} form label{ cursor: pointer} .wrapper{ max-width: 1220px; padding: 0 10px; margin: 0 auto} .is-sp{ display: none !important} .l-main, .l-social{ display: flex; align-items: center} .u-center{ text-align: center !important} .u-left{ text-align: left !important} .btn-download, .link, .ttl-primary{ text-align: center} @media screen and (max-width: 767px){ .is-pc{ display: none !important} .is-sp{ display: block !important} main{ padding-top: 57px}} @media screen and (max-width: 500px){ main{ padding-top: 53px}} @font-face{ font-family: Montserrat; src: url(./Montserrat-Black.ttf); font-display: swap} .l-main{ width: 100%; min-height: 600px; color: #000; justify-content: center; flex-wrap: wrap} .l-address{ color: #0d6799; font-size: 16px; line-height: 24px} .modal-contact .inner{ background: #025899; border-radius: 30px; text-align: center; padding: 33px 25px; max-width: 343px; margin: 0 auto} .modal-contact .inner strong{ font-size: 22px; line-height: 33px; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent} .modal-contact .inner .title{ color: #fff; font-size: 18px; line-height: 27px; margin-bottom: 9px} .modal-contact .inner .text{ color: #fff; margin-bottom: 34px} .box-nd_inner .text:last-of-type, .box-uudai .l-outstand, .hocvan .l-doctors_info .certificate, .l-commit_item .text, .l-demo.is-one .l-demo_item .demo-img, .l-doctors.is-single .l-doctors_item, .l-doctors.is-special .l-doctors_info .certificate, .l-flow_item:last-of-type, .l-noibat_item .nd .text, .l-slogan_item .info .text, .l-steps_block .img:last-of-type, .m-commit_block:last-of-type, .m-goods_block:last-of-type, .m-phacdo .doc-intro, .m-tech_info .content_block:last-of-type, .modal-contact .inner .text:last-of-type{ margin-bottom: 0} .modal-contact .inner .row{ margin-bottom: 18px} .l-address> li p, .l-info> li, .l-issues_item .ico{ margin-bottom: 6px} .modal-contact .inner .m-btn{ margin-bottom: 13px; margin-top: 34px} .modal-contact .inner .m-btn a{ width: 100%; font-size: 18px; height: 40px} .l-social{ margin-top: 14px; margin-bottom: 25px} .l-certi, .l-payment{ align-items: center; display: flex} .l-social li{ margin-right: 20px} .l-payment{ margin-top: 14px; margin-bottom: 37px} .l-address, .l-info{ margin-top: 10px} .l-payment li{ margin-right: 15px} .l-certi{ margin-left: -7px} .l-certi li{ margin-right: 7px} .l-address> li p{ padding-left: 25px; background-repeat: no-repeat; background-position: left center} .l-address> li p.phone{ background-image: url(../images/ico_phone_sp.svg)} .m-contact .ttl-primary, .m-contact strong{ margin-bottom: 2px} .l-info a{ display: block; font-size: 16px; line-height: 24px; color: #025899; padding-left: 27px; background: url(../images/ico_arrow_menu.svg) left center no-repeat} .l-anchors a:hover, .l-info a:hover{ text-decoration: underline} .m-btn .submit-button, .m-btn a, .m-btn button{ display: inline-flex; font-weight: 700; font-size: 22px; line-height: 33px; color: #025899; height: 42px; align-items: center; justify-content: center; padding: 0 32px; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); border-radius: 20px; border: none; text-wrap: nowrap} .link, .ttl-primary.is-red{ background: linear-gradient(270deg, #ff1f1f 0, rgba(255, 105, 105, 0.932292) 50%, #ff1f1f 100%); -webkit-text-fill-color: transparent; text-fill-color: transparent} .m-btn.is-reverse a, .p-promotion .l-uudai_item .heading{ background: #025899; color: #fff} .m-btn.is-small a{ font-size: 15px !important; line-height: 22px !important} @media screen and (min-width: 768px){ .trans:hover{ opacity: 0.7; transition: opacity 0.3s} .m-btn a:hover, .m-btn button:hover{ background: #025899; color: #fff} .m-btn.is-reverse a:hover{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); color: #025899}} .btn-download a, .link{ font-size: 18px; line-height: 27px; font-weight: 700} .link{ display: block; -webkit-background-clip: text; background-clip: text} .btn-download a{ color: #fff; background: url(../images/dieutri/sp/ico_download.svg) left 36px center no-repeat #025899; padding: 6px 35px 6px 68px; border-radius: 20px} .ttl-primary{ font-size: 30px; font-weight: 700; line-height: 45px; color: #025899; margin-bottom: 30px} .ttl-primary.is-white{ color: #fff} .ttl-primary.is-red{ -webkit-background-clip: text; background-clip: text} .ttl-primary--is-medium{ font-size: 25px; line-height: 38px} .ttl-secondary{ font-weight: 700; font-size: 22px; line-height: 33px; color: #025899} .ttl-bl{ font-weight: 700; font-size: 18px; line-height: 27px; color: #025899} .m-contact strong, .ttl-border{ font-size: 22px; line-height: 33px; text-align: center} .ttl-border{ color: #025899; position: relative} .m-input, .ttl-background{ font-size: 18px; line-height: 27px} .ttl-border::before{ position: absolute; content: ""; width: 240px; height: 2px; bottom: 0; left: 50%; transform: translateX(-50%); background: #d9d9d9} .ttl-border span{ display: inline-block; padding-bottom: 5px} .ttl-background{ text-align: center; color: #025899; padding: 5px; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); border-radius: 20px} .m-input{ background: #fff; border: 1px solid #025899; border-radius: 30px; height: 34px; color: #2b2b2b; padding: 0 17px; width: 100%} .m-contact{ background: url("../images/top/bg_contact.jpg.webp") center/cover no-repeat; padding: 70px 0 65px} .m-contact strong{ display: block; color: #025899} .m-contact p{ text-align: center; font-size: 18px; line-height: 27px; margin-top: 2px; margin-bottom: 25px} .l-items_block .m-btn, .m-contact form, .m-customer_item .info .m-btn, .m-intro .ttl-head, .m-paper_btn .m-btn, .m-phacdo .heading, .m-phacdo .ttl-primary, .m-worry .doc-intro, .v1-404-lead, .v1-price-center, .v1-text-center{ text-align: center} .m-contact .row-input{ max-width: 534px; margin: 0 auto 22px} .customer-review .text, .hinhdanh, .hocvan .text, .l-tooths.is-bracer .content .text, .m-about .text, .m-about .ttl-secondary, .m-article figure, .m-basis .image, .m-basis .text, .m-basis .ttl-bl, .m-basis .ttl-secondary, .m-doc-demo .text, .m-intro .explant .ttl-secondary, .m-price, .m-promo-normal .ttl-primary, .m-risks .text, .m-ungdung .img, .m-ungdung .text, .m-who .text, .m-who .ttl-secondary, .p-bracer .m-intro .explant .ttl-primary, .p-veneer .l-uudai, .p-veneer .m-intro .explant .ttl-primary, .tooth-block .text, .tooth-block .ttl-border{ margin-bottom: 20px} .l-breadcrumbs> li:last-of-type::after, .m-checkbox .label input, .service-slide, .v1-answer{ display: none} .m-checkbox .label input:checked + span::after{ opacity: 1; visibility: visible} .m-checkbox .label span{ font-size: 16px; line-height: 24px; color: #025899; position: relative; padding-left: 30px} .m-checkbox .label span::before{ position: absolute; content: ""; width: 20px; height: 20px; border: 1px solid #2b2b2b; background: #fff; left: 0; top: -2px} .m-checkbox .label span:after{ position: absolute; content: ""; width: 14px; height: 14px; left: 4px; top: 2px; background: #000; opacity: 0; visibility: hidden; transition: 0.3s} .box-khuyencao .text{ margin-bottom: 16px} .l-risk .ttl .ttl-secondary, .l-tooths_item .info_block .info_block_title strong, .m-aboutident .ttl-primary{ color: #fff} .m-select{ background: url("../images/ico_select.svg") right 19px center no-repeat #fff} .l-news_item .info .tag, .l-outstand li::before, .tag{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%)} .table-common th{ font-weight: 700; font-size: 18px; line-height: 27px; text-align: center; color: #fff; background: #025899} .l-tooths.is-bracer .img, .table-common th.w02{ width: 390px} .table-common td, .table-common th{ border: 1px solid #025899; padding: 9px} .table-common td strong, .table-common th strong{ display: block; text-align: center; font-weight: 700; font-size: 18px; line-height: 27px; color: #025899} .table-common td .price.is-old, .table-common th .price.is-old{ color: #000; text-decoration: line-through} .table-common ul.text{ padding-left: 1em} .table-common ul.text li{ text-indent: -1em} .table-scroll{ overflow-y: hidden; overflow-x: auto} .m-news{ padding: 50px 0 70px} .l-news{ display: flex; flex-wrap: wrap; margin: 0 -31px} .l-news_item{ width: 33.3333%; padding: 0 31px} .l-news_item .images{ margin-bottom: 28px; border-radius: 20px; overflow: hidden} .bg-uudai .btn img, .bg-uudai img, .l-doctors .l-cer-img .slick-slider, .l-doctors_images img, .l-news_item .images img, .m-commit_block .img img, .m-detail_side-bnr img, .m-video.is-short .l-video> li .vidplay, .mv-top img, .p-all-in .mv .btn img, .p-basis .mv .ttl img, .p-promotion .mv .btn img, .p-service .mv .btn img, .p-story .m-detail_video img{ width: 100%} .l-news_item .info .tag, .tag{ font-weight: 400; font-size: 15px; line-height: 22px; color: #025899; display: inline-block; border-radius: 20px; padding: 5px 16px} .l-breadcrumbs, .l-breadcrumbs> li::after, .pagination{ font-size: 16px; line-height: 24px} .l-news_item .info .title{ margin-top: 18px; font-weight: 700; font-size: 22px; line-height: 33px; color: #025899; margin-bottom: 14px} .l-news_item .info .text{ font-size: 18px; line-height: 27px; color: #000; margin-bottom: 20px} .l-news_item .info .m-btn a{ height: 33px; font-size: 18px; font-weight: 400} .swiper-btn{ width: 30px; height: 30px; z-index: 1} .pagination{ margin-top: 70px} .pagination .nav-links{ display: flex; align-items: center; justify-content: center; gap: 10px} .pagination .prev{ transform: rotate(180deg)} .breadcrumbs{ margin-top: 16px; margin-bottom: 10px} .l-breadcrumbs{ display: flex; flex-wrap: wrap} .box-text .text, .khach-hang-review quote .text, .l-anchors a, .l-breadcrumbs a, .l-breadcrumbs span, .l-ekip_item .info .ttl, .l-tooths_item .text-first, .note .l-check li, .tragop-benefit .l-dots, .v1-doctor-note, .warning .text span{ color: #025899} .bg-uudai, .key-service .service-slide_item, .l-breadcrumbs> li, .l-outstand li, .l-spec_item .inner, .m-doctors .l-doctors .doc-img .bg, .m-doctors .l-doctors .doc-img .bg img, .p-basis .mv, .p-bracer .mv, .p-doctung .mv, .p-tooth-ceramic .mv, .p-veneer .mv, .swiper-container{ position: relative} .l-breadcrumbs> li::after{ display: inline-block; content: "/"; color: #025899; margin: 0 5px} .box-information .l-address, .box-information .ttl-primary, .l-items_block .l-dd li, .l-items_block .price-box, .l-outstand a, .text{ font-size: 18px; line-height: 27px} .box-information{ border-top: 1px solid #979797; padding-top: 18px} .box-information .ttl-primary{ margin-bottom: 21px} .box-information .l-social{ justify-content: center; margin-bottom: 35px} .box-information .l-address{ margin-bottom: 30px} .box-information .l-address span{ color: #2b2b2b; font-weight: 700; margin-right: 4px} .l-outstand{ display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px} .l-outstand li::before{ position: absolute; content: ""; width: 4px; height: 100%; left: 0; top: 0; z-index: 1} .l-outstand a{ display: block; padding: 8px 15px; background: #e4f4ff; color: #2b2b2b} .text{ color: #000; text-align: justify} .swiper-btn{ position: absolute; top: 50%; transform: translateY(-50%); background-size: 100% !important} .swiper-next{ background: url(../images/ico_next.svg) center no-repeat; right: 0} .swiper-prev{ background: url(../images/ico_prev.svg) center no-repeat; left: 0} .l-doctors_thumb .thumb-item .name{ position: absolute; width: 100%; bottom: 0; left: 0; background: #025899; text-align: center; padding: 13px 2px} .l-doctors_thumb .thumb-item .name span, .l-doctors_thumb .thumb-item .name strong{ display: block; font-size: 18px; line-height: 1} .l-doctors_thumb .thumb-item .name span{ color: #fff; margin-bottom: 4px} .l-doctors_thumb .thumb-item .name strong, .l-uudai_item.is-blue .heading strong, .p-promotion .l-uudai_item .heading strong{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent} .l-doctors_thumb a, .m-doctors .l-doctors_thumb a{ height: 275px; background: #fff; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px; display: flex; align-items: flex-end; position: relative; overflow: hidden} .l-doctors_thumb.is-special .thumb-item, .m-doctors .l-doctors_thumb .thumb-item{ padding: 10px 15px} .l-doctors_thumb.is-special .thumb-item_inner, .m-doctors .l-doctors_thumb .thumb-item_inner{ position: relative; padding: 1px} .l-doctors_thumb.is-special .thumb-item_inner::before, .m-doctors .l-doctors_thumb .thumb-item_inner::before{ position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; border-radius: 20px; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%), linear-gradient(0deg, #f7f7f7, #f7f7f7); opacity: 0} .l-cons_item .info .ttl-bl, .l-doctors.is-single .certificate, .l-items_block, .l-tooths_item .ttl-background, .l-type .l-check li, .m-article li{ margin-bottom: 10px} .l-items_block .item-name{ text-align: center; color: #fff; background: #025899; padding: 8px} .l-items_block .body{ background: #e4f4ff; padding: 15px 10px} .l-items_block .l-dd, .warning .text{ margin-bottom: 15px} .l-items_block .l-dd li{ padding-left: 1rem; text-indent: -1rem} .l-items_block .price-box{ display: flex; color: #025899; font-weight: 700; margin-bottom: 10px} .l-items_block .price-box dt{ width: 160px} .l-items_block .price-box dd .price.old{ color: #2b2b2b; text-decoration: line-through} .intro{ background: linear-gradient(270deg, #eaf6ff 0, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%); padding: 50px 0 25px} .key-service .service-slide_item .service-name strong{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%)} .cus-images, .l-demo.is-one .l-demo_item .wrap, .l-demo_item .wrap, .m-customer_inner, .m-detail_side-bnr{ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)} .tv-clip{ display: flex; justify-content: space-between; margin: 0 -10px; flex-wrap: wrap; gap: 20px 0} .tv-clip li{ width: 50%; padding: 0 10px} .tv-clip .fig-title{ text-align: center; font-size: 18px; line-height: 27px; color: #025899; font-weight: 400; margin-top: 21px; padding-left: 30px; padding-right: 30px} .vidplay{ display: block; border-radius: 20px; overflow: hidden; position: relative} .vidplay::before{ position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: #e3e3e3; opacity: 0.3; border-radius: 20px} .vidplay::after{ position: absolute; content: ""; width: 44px; height: 44px; background: url(../images/ico_play.svg) no-repeat; top: 50%; left: 50%; transform: translate(-50%, -50%)} .key-service{ padding: 50px 0 40px} .key-service .wrapper{ overflow: hidden; max-width: 1300px} .key-service .service-slide{ margin-top: -30px} .key-service .service-slide_item::before{ position: absolute; content: ""; width: 50px; height: 50px; background: url("../images/ico_tooth.svg") no-repeat; left: 50%; transform: translateX(-50%); bottom: -25px; z-index: 1} .key-service .service-slide_item a{ width: 365px; display: block; background: #d9d9d9; border-radius: 20px; overflow: hidden; position: relative; height: 400px} .key-service .service-slide_item .service-name{ position: absolute; width: 100%; bottom: 0; left: 0; border-radius: 20px; padding: 25px 31px 40px; display: flex; flex-direction: column; background-color: #025899} .key-service .service-slide_item .service-name::before{ position: absolute; content: ""; width: 100px; height: 100px; right: 31px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat} .key-service .service-slide_item .service-name span{ font-weight: 700; font-size: 22px; line-height: 33px; color: #fff} .key-service .service-slide_item .service-name strong{ font-size: 30px; font-weight: 700; line-height: 45px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; max-width: 220px; margin-top: -7px; border-bottom: 1px solid #d9d9d9} .key-service .service-slide_item .service-name.is-implant::before{ background-image: url(../images/top/img_implant.png)} .key-service .service-slide_item .service-name.is-nieng::before{ background-image: url(../images/top/img_nieng.png)} .key-service .service-slide_item .service-name.is-dieutri::before{ background-image: url(../images/top/img_dieutri.png)} .key-service .service-slide_item .service-name.is-su::before{ background-image: url(../images/top/img_rangsu.png)} .m-doctors .l-doctors .doc-img .bg::before, .m-doctors .l-doctors_inner::before{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%)} .m-doctors{ background: #f7f7f7; padding-bottom: 95px} .m-doctors .l-doctors{ background: url(../images/top/bg_doctor.jpg.webp) center/cover no-repeat; padding-top: 37px} .m-doctors .l-doctors_item, .m-reward_inner{ display: flex; justify-content: space-between} .m-doctors .l-doctors_inner{ margin-top: -40px; position: relative} .m-doctors .l-doctors_inner::before{ position: absolute; content: ""; height: 3px; width: 100%; bottom: 0; left: 0; z-index: 1} .m-doctors .l-doctors .doc-info{ flex: 1; padding-top: 35px} .m-doctors .l-doctors .doc-info .title{ font-weight: 700; font-size: 22px; line-height: 33px} .m-doctors .l-doctors .doc-info .name{ font-weight: 700; font-size: 30px; line-height: 45px; color: #025899; margin-bottom: 20px} .m-doctors .l-doctors .doc-img{ width: 35%; position: relative; padding-bottom: 20px; padding-top: 10px} .m-doctors .l-doctors .doc-img .bg::before{ position: absolute; content: ""; width: 100%; height: 100%; border-radius: 50%; top: -7px} .m-doctors .l-doctors .doc-img .img{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)} .about-bs .loibacsi, .box-khuyencao .m-btn, .m-doctors .l-doctors_thumb, .m-maps{ margin-top: 40px} .m-prize{ background: #025899; padding: 30px 0} .m-prize .l-prize{ display: flex; justify-content: space-between; text-align: center} .about-bs .wrap .loibacsi .text, .implant-points_block .text, .m-article p, .m-reward .info .text{ text-align: justify} .m-prize .l-prize .vec, .v1-mb-25{ margin-bottom: 25px} .l-demo.is-one .l-demo_item .demo-img img, .l-steps_block .img img, .m-basis .image img, .m-commit_ttl img, .m-phacdo, .m-prize .l-prize .vec img{ margin: 0 auto} .m-prize .l-prize p{ font-size: 18px; line-height: 27px; color: #fff} .m-reward{ background: linear-gradient(270deg, #eaf6ff 0, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%); padding: 50px 0 13px} .m-reward_inner .img{ display: flex; align-items: flex-end} .m-reward .info{ font-size: 18px; line-height: 27px; max-width: 670px} .m-reward .img_item{ margin-left: 50px} .m-reward .img_item:first-of-type{ margin-left: 10px} .block-diff .block-child, .l-commit_item p, .l-video> li, .m-detail_head-right, .m-detail_inner, .m-paper_btn, .m-problem_inner, .m-video_inner{ display: flex} .l-reward{ padding-left: 25px; margin-top: 5px} .l-reward li{ padding-left: 35px; background: url(../images/ico_check.svg) left top 3px no-repeat} .m-video{ padding: 50px 0 30px} .m-video_main{ width: 650px} .m-video_main .vidplay::after{ width: 38px; height: 38px; background-size: 100%} .l-video{ flex: 1; padding-left: 18px; height: 394px; overflow-x: hidden; overflow-y: auto} .l-video> li{ margin-bottom: 13px} .l-video> li .vidplay{ width: 188px} .l-video> li .vidplay::after{ width: 17px; height: 17px; background-size: 100%} .l-video> li .video-info{ flex: 1; padding-left: 19px} .l-video> li .video-info .title{ font-size: 18px; line-height: 27px; font-weight: 400} .l-video> li .video-info .view{ font-size: 15px; font-weight: 700; line-height: 22px; color: #025899} *{ scrollbar-width: thin; scrollbar-color: #025899 #d9d9d9}::-webkit-scrollbar{ width: 7px}::-webkit-scrollbar-track{ border-radius: 5px; background-color: #d9d9d9}::-webkit-scrollbar-track:hover{ background-color: #b8c0c2}::-webkit-scrollbar-track:active{ background-color: #b8c0c2}::-webkit-scrollbar-thumb{ border-radius: 5px; background-color: #025899}::-webkit-scrollbar-thumb:hover{ background-color: #036ebf}::-webkit-scrollbar-thumb:active{ background-color: #036ebf} .m-customer{ background: linear-gradient(270deg, #eaf6ff 0, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%); padding: 30px 0} .m-customer_item{ width: 370px; padding: 10px 23px} .m-customer_item .image{ width: 100%; height: 317px; position: relative; border-radius: 20px; overflow: hidden} .l-trust_item .img img, .l-uudai_item .body .img_inner img, .m-customer_item .image img, .page-bnr .right img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover} .m-customer_item .info{ margin-top: 27px} .m-customer_item .info .cus-name{ font-size: 22px; font-weight: 700; line-height: 33px; color: #025899; margin-bottom: 10px} .m-customer_item .info .text{ font-size: 18px; line-height: 27px; color: #000; margin-bottom: 45px} .m-customer_item .info .m-btn a{ height: 33px; font-weight: 400; font-size: 18px; padding-top: 2px} .m-customer_inner{ padding: 20px 30px 48px; background: #fff; border-radius: 20px} .m-paper{ padding: 50px 0} .m-paper_item{ width: 370px} .m-paper_inner{ padding: 10px 23px} .m-paper_wrap{ position: relative; border-radius: 20px; overflow: hidden} .p-doctung .m-paper_wrap{ max-height: 668px; width: 100%} .m-paper_btn{ position: absolute; bottom: 0; left: 0; width: 100%; height: 78px; text-align: center; background: #f7f7f7; border-radius: 0 0 10px 10px; align-items: center; justify-content: center} .article-title, .m-article table td:first-child{ text-align: left} .m-paper_btn .m-btn a{ height: 33px; font-weight: 400; font-size: 18px} @media screen and (max-width: 1290px){ .m-customer .slick-slider, .m-doctors .slick-slider, .m-paper .slick-slider, .p-promotion .slick-slider{ padding: 0 40px} .m-customer_inner{ padding: 15px} .m-customer_item .info .text{ font-size: 15px; line-height: 1.5; margin-bottom: 25px}} .box-doctor .doc-title> li::before, .l-anchors ol li::before{ width: 4px; height: 4px; border-radius: 50%; top: 9px; position: absolute; content: ""; left: 9px} .certificate{ font-size: 18px; line-height: 27px; max-width: 648px; margin-bottom: 30px} .m-detail_head-right .view-rate, .time{ font-size: 16px; line-height: 24px; color: #025899} .certificate li{ position: relative; padding-left: 15px} .certificate li::before{ position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; left: 0; top: 11px; background: #000} .m-kienthuc{ padding-top: 70px; padding-bottom: 50px} .l-story .l-news_item .text, .m-kienthuc .l-news_item .info .text{ font-size: 15px; line-height: 22px} .m-kienthuc .l-news_item .info .m-btn a{ font-size: 15px} .m-kienthuc_main{ margin-bottom: 70px} .m-kienthuc_main .l-news_item{ width: 100%; padding: 0; display: flex; justify-content: space-between} .m-kienthuc_main .l-news_item .images{ width: 46.3%; order: 2; margin-bottom: 0; margin-left: 10px} .m-kienthuc_main .l-news_item .info{ flex: 1; max-width: 590px; order: 1} .l-story, .m-kienthuc_list .l-news, .p-service .l-prize{ gap: 50px 0} .time{ padding-left: 24px; background: url(../images/ico_clock_blue.svg) left center no-repeat; margin-right: 25px} .m-detail{ padding-bottom: 50px} .box-khuyencao .img, .m-detail_side{ width: 360px} .m-detail_side-bnr{ border-radius: 20px; overflow: hidden; margin-bottom: 20px} .m-detail_detail{ flex: 1; padding-right: 60px} .m-detail_bnr{ border-radius: 20px; overflow: hidden; margin-bottom: 25px} .m-detail_bnr img{ width: 100%; height: auto} .m-detail_head{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 21px} .article-title, .box-doctor, .m-article p{ margin-bottom: 20px} .m-detail_head-right .rating{ display: flex; gap: 2px; margin-right: 15px; margin-top: 2px} .article-title{ font-size: 22px; line-height: 33px} .box-doctor{ padding: 5px 25px 5px 17px; display: flex; align-items: center; background: #e4f4ff; border-radius: 20px} .box-doctor .right{ width: 115px; display: flex; flex-direction: column; gap: 15px} .box-doctor .left{ flex: 1; display: flex; align-items: center} .box-doctor .image{ width: 104px; height: 104px; border-radius: 50%; overflow: hidden; position: relative; background: #fff; flex-shrink: 0; margin-right: 13px} .box-doctor .image img, .cus-images .left img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover} .box-doctor .name{ font-size: 15px; line-height: 22px; color: #000; margin-bottom: 5px} .box-doctor .name strong{ font-size: 16px; line-height: 24px; color: #025899; margin-left: 8px} .box-doctor .doc-title{ font-size: 15px; line-height: 22px; color: #000; display: flex; flex-direction: column; gap: 3px} .box-doctor .doc-title> li, .l-anchors ol li{ position: relative; padding-left: 25px} .box-doctor .doc-title> li::before{ background: #000} .box-doctor .m-btn a{ padding-left: 0; padding-right: 0; width: 100%; height: 25px; font-weight: 400} .l-anchors{ font-size: 16px; line-height: 24px; list-style: none !important; padding-left: 0 !important; margin-bottom: 0 !important} .l-anchors ol li::before{ background: #025899} .m-article, .m-giaiphap{ margin-bottom: 35px} .m-article p{ color: #000; font-size: 18px; line-height: 33px} .m-article h3, .m-article h4, .m-article h5{ font-size: 20px; line-height: 27px; color: #000; font-weight: 700; margin-bottom: 20px} .m-article figcaption{ font-size: 16px; line-height: 24px; color: #025899; text-align: center; margin-top: 15px} .m-article ol, .m-article ul{ font-size: 18px; line-height: 27px; text-align: justify; margin-bottom: 20px; padding-left: 1.5em} .m-article ol{ list-style: decimal} .m-article .signature{ display: block; text-align: right; font-weight: 700; font-size: 18px; line-height: 27px; margin-top: 35px} .m-article table{ width: 100%; margin-bottom: 20px} .m-article table td, .m-article table th{ border: 1px solid #025899} .m-article table th{ font-weight: 700; font-size: 18px; line-height: 27px; text-align: center; padding: 12px 10px; background: #025899; color: #fff} .m-article table th:first-child{ width: 365px} .m-article table td{ font-size: 18px; line-height: 27px; padding: 13px 10px; text-align: center; min-height: 75px} .m-article ul{ list-style-type: disc} @media screen and (max-width: 960px){ .m-detail_inner{ flex-direction: column} .m-detail_detail{ width: 100%; padding: 0} .m-detail_side{ width: 100%; display: flex; justify-content: space-around; margin-top: 20px; align-items: flex-start}} .p-contact .m-contact{ margin-top: 23px} .contact-information{ background: #025899; padding: 19px 0 26px} .contact-information .l-cm{ display: flex; align-items: center; justify-content: space-between; gap: 10px} .contact-information .l-cm li img{ height: 62px} @media screen and (max-width: 875px){ .contact-information .l-cm{ flex-direction: column; gap: 20px; align-items: flex-start} .contact-information .l-cm li img{ height: 50px}} .m-maps_item{ display: flex; gap: 20px; justify-content: space-between; margin-bottom: 60px} .m-maps_item .maps-info{ width: 46.5833%} .m-maps_item .maps-info .title{ font-size: 22px; line-height: 33px; color: #025899; padding-bottom: 4px; border-bottom: 1px solid #025899; margin-bottom: 16px} .m-maps_item .maps-info address{ font-size: 18px; line-height: 27px; padding-left: 40px; background: url(../images/ico_location_bl.svg) left top 4px no-repeat; font-style: normal; margin-bottom: 7px} .m-maps_item .maps-info .phone{ font-size: 18px; line-height: 27px; padding-left: 40px; background: url(../images/ico_phone_bl.svg) left top 4px no-repeat} .m-maps_item .maps-iframe{ width: 48.75%} .m-maps_item .maps-iframe iframe{ display: block; width: 100%; height: 230px} .block-diff, .hocvan .l-doctors_item, .khach-hang-review .group, .l-doctors.is-special .l-doctors_item, .l-giaiphap li .img, .l-steps_block, .l-steps_block .text, .m-noibat, .p-reason .mv, .p-service .l-doctors_item, .tooth-type, .whats-tragop{ margin-bottom: 30px} .hocvan, .m-story, .p-about .m-contact, .p-all-in .m-contact, .p-basis .m-contact, .p-bracer .m-contact, .p-doctors .m-contact, .p-doctung .m-contact, .p-promotion .m-contact, .p-reason .m-contact, .p-service .m-contact, .p-veneer .m-contact{ margin-bottom: 50px} .l-filter{ display: flex; align-items: center; justify-content: center; gap: 17px; margin-bottom: 30px; margin-top: -23px} .l-filter a{ font-size: 16px; line-height: 24px; font-weight: 700; color: #fff; padding: 4px 25px; background: #025899; border-radius: 30px; display: block} .box-short .l-short> li, .l-check li{ background: url(../images/ico_check.svg) left top 3px no-repeat} .p-story .m-detail{ max-width: 855px; margin: 30px auto} .p-story .m-detail_head{ flex-direction: column} .p-story .m-detail .post-title{ font-size: 22px; line-height: 33px; margin-bottom: 0} .box-short .l-short> li, .box-short .title, .cus-images .cus-info .name, .cus-images .cus-service, .cus-images .small-img .ig::before, .ekip .ttl-primary, .l-ekip_item .info span{ line-height: 27px; font-size: 18px} .p-story .m-detail_video{ margin-bottom: 40px} .box-nd, .box-short{ background: #e4f4ff; margin-bottom: 30px} .box-short .title{ display: block; text-align: center; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); color: #025899; padding: 9px 5px 6px} .box-short .l-short{ padding: 17px; display: flex; flex-direction: column; gap: 20px} .box-short .l-short> li{ color: #000; padding-left: 34px} .box-short .l-short> li span{ font-weight: 700; color: #025899; margin-right: 11px} .ekip .ttl-primary{ margin-bottom: 20px} .l-ekip{ display: flex; flex-wrap: wrap; margin-bottom: 20px} .l-ekip_item{ width: 50%; padding: 20px; display: flex; align-items: flex-start} .l-ekip_item .img{ width: 165px; border-radius: 20px; overflow: hidden} .l-ekip_item .info{ flex: 1; padding-left: 25px} .l-ekip_item .info span{ display: block} .l-ekip_item .info .pos{ margin-bottom: 3px} .l-ekip_item .info .name, .l-faq_item .answer .text span{ font-weight: 700; color: #025899} .l-ekip_item .info .gr-btn{ margin-top: 28px; display: flex; flex-direction: column; gap: 10px} .l-ekip_item .info .m-btn a{ font-weight: 400; width: 115px; padding-left: 5px; padding-right: 5px; height: 30px} .cus-images, .l-cons_item{ align-items: center; display: flex} .cus-images{ padding: 15px; border: 1px solid #025899; border-radius: 30px; margin-bottom: 30px} .cus-images .big-img, .cus-images .small-img .ig{ position: relative; border-radius: 20px; overflow: hidden} .cus-images .right{ width: 275px} .cus-images .left{ flex: 1; padding-right: 30px; gap: 10px; display: flex} .cus-images .big-img{ width: 274px; height: 357px} .cus-images .small-img{ display: flex; flex-direction: column; gap: 10px; flex: 1} .cus-images .small-img .ig{ height: 173px} .cus-images .small-img .ig::before{ position: absolute; width: 90px; background: #025899; color: #fff; padding: 3px 13px; bottom: 0; left: 0; border-top-right-radius: 20px; box-sizing: border-box; z-index: 1; text-align: center} .cus-images .small-img .ig.after::before, .l-demo_item .demo-img .img-small .img.before::before{ content: "Trước"} .cus-images .small-img .ig.before::before, .l-demo_item .demo-img .img-small .img.after::before{ content: "Sau"} .cus-images .cus-info{ padding-bottom: 15px; margin-bottom: 7px; border-bottom: 2px solid #025899} .cus-images .cus-info .name{ color: #000} .cus-images .cus-info .name strong{ font-size: 22px; line-height: 33px; color: #025899; margin-left: 8px} .block-diff .block-child .info .title, .cus-images .cus-info .loc{ font-size: 18px; line-height: 27px; color: #025899} .cus-images .cus-service{ color: #000; margin-bottom: 5px} .bracer-type, .m-3points, .m-bracer-price, .m-cons, .m-goods, .m-intro, .m-veneer-best, .m-worry{ padding: 30px 0} .l-cons, .l-veneer{ display: flex; flex-direction: column; gap: 10px} .l-cons_item{ padding: 14px 18px; background: #e4f4ff; border-radius: 10px} .l-cons_item .img{ width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #025899} .l-cons_item .info{ flex: 1; padding-left: 55px} .m-tooth-type, .m-trust{ padding: 30px 0 0} .l-trust{ display: flex; margin: 0 -23px; gap: 30px 0; flex-wrap: wrap} .l-trust_item{ padding: 0 23px; width: 50%} .l-trust_item .img{ width: 294px; height: 294px; border-radius: 50%; overflow: hidden; position: relative; margin: 0 auto -147px} .l-trust_item .info{ background: #e4f4ff; border: 1px solid #025899; border-radius: 20px; padding: 167px 17px 40px} .box-nd .title, .l-doctors .l-cer-img_item> div, .l-slogan_item .img{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%)} .block-diff .ttl-bl, .l-trust_item .info .ttl-bl{ text-align: center; margin-bottom: 20px} .l-trust_item .m-btn, .l-uudai_item .body .m-btn{ text-align: center; margin-top: 20px} .l-bra-price_item .m-btn a, .l-trust_item .m-btn a{ font-size: 18px; height: 34px} .m-prize.is-short .wrapper, .m-reward.is-short .wrapper, .m-video.is-short .wrapper{ max-width: 875px} .m-reward.is-short .info{ max-width: 480px} .m-reward.is-short .img_item{ margin-left: 20px} .m-prize.is-short .l-prize .vec{ margin-bottom: 17px} .m-prize.is-short .l-prize .vec img{ height: 46px} .m-video.is-short .m-video_main{ width: 100%; margin-bottom: 15px} .m-video.is-short .l-video{ display: flex; flex-wrap: wrap; height: auto; margin: 0 -10px; padding-left: 0} .m-video.is-short .l-video> li{ width: 33.33333%; flex-direction: column; padding: 0 10px} .m-video.is-short .l-video> li .video-info{ padding-left: 0; margin-top: 10px} .box-information.is-short{ max-width: 855px; margin: 0 auto 37px} .page-bnr{ background: url(../images/about/bnr.jpg.webp) top center/cover no-repeat; padding: 32px 0; margin-top: 50px; margin-bottom: 40px} .page-bnr_inner{ display: flex; align-items: center; justify-content: space-between} .page-bnr .left{ flex: 1; max-width: 735px} .page-bnr .left .ttl-primary{ text-align: left; font-size: 34px; line-height: 51px; margin-bottom: 0} .page-bnr .left strong{ display: block; margin-bottom: 14px} .page-bnr .left .text{ color: #000; font-size: 18px; line-height: 33px; margin-bottom: 30px} .page-bnr .right{ width: 364px; height: 364px; position: relative; overflow: hidden; border-radius: 50%} .m-about_block--is-col{ display: flex; align-items: center; margin-bottom: 60px} .m-about_block--is-col .right{ width: 428px} .m-about_block--is-col .left{ flex: 1; padding-right: 90px} .box-nd .title, .l-slogan_item .info strong{ color: #025899; font-size: 18px; line-height: 27px} .box-nd .title{ text-align: center; font-weight: 700; padding: 6px} .box-nd_inner{ padding: 15px 20px} .l-slogan{ display: flex; flex-wrap: wrap; margin: 0 -35px 60px; gap: 50px 0} .l-slogan_item{ width: 50%; padding: 0 35px; display: flex; align-items: center} .l-slogan_item .img{ width: 94px; height: 94px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; border: 1px solid #fff} .m-commit_block--is-reverse .l-commit_item:nth-child(odd), .p-reason .intro{ background: 0 0} .l-slogan_item .info{ flex: 1; padding-left: 20px} .l-slogan_item .info strong{ display: block; text-align: center; padding-bottom: 3px; border-bottom: 1px solid #025899; margin-bottom: 3px} .l-noibat{ display: flex; flex-wrap: wrap; margin: 0 -20px; gap: 18px 0} .l-noibat> li{ width: 50%; padding: 0 20px} .l-noibat_item{ display: flex; background: #e4f4ff; border-radius: 20px; overflow: hidden; height: 100%} .l-noibat_item .ico{ width: 220px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #025899} .l-noibat_item .nd{ flex: 1; min-height: 95px; display: flex; align-items: center; justify-content: center; padding: 3px 10px; text-align: center} .m-commit{ background: #f7f7f7; padding: 30px 0 20px} .m-commit_ttl{ text-align: center; margin-bottom: 40px} .m-commit_block{ display: flex; align-items: flex-start; margin-bottom: 30px} .m-commit_block .img{ width: 356px; overflow: hidden; border-radius: 20px} .m-commit_block .l-commit{ flex: 1; padding-left: 30px} .m-commit_block--is-reverse .img, .m-goods_block.is-rev .l-goods, .m-review.is-reverse .m-review_img{ order: 2} .m-commit_block--is-reverse .l-commit{ padding-left: 0; padding-right: 30px} .l-commit_item:nth-child(odd), .m-commit_block--is-reverse .l-commit_item:nth-child(2n){ background: #e4f4ff} .p-doctung .mv .name, .p-doctung .mv .name::before{ background: linear-gradient(270deg, #ff1f1f 0, rgba(255, 105, 105, 0.932292) 50%, #ff1f1f 100%); position: absolute} .l-commit_item{ font-size: 18px; line-height: 27px; display: flex; align-items: center; padding: 17.5px 2px; min-height: 73px} .l-commit_item span{ flex-shrink: 0; margin-right: 3px} @media screen and (max-width: 900px){ .l-noibat li{ width: 100%}} .doc-intro{ background: #e4f4ff; padding: 10px; margin-top: 20px; margin-bottom: 40px} .l-doctors_item{ display: flex; margin-bottom: 50px} .l-doctors_images{ width: 375px; overflow: hidden} .l-doctors_info{ width: calc(100% - 375px); padding-left: 54px} .l-doctors_info_inner{ position: relative; padding-bottom: 190px; height: 100%} .l-doctors_info .name{ font-size: 22px; line-height: 33px; color: #025899; margin-bottom: 10px} .l-doctors_info .certificate{ max-width: 100%; padding-left: 8px} .l-doctors .l-cer-img{ display: flex; position: absolute; bottom: 0; left: 0; padding-bottom: 15px; border-bottom: 2px solid #025899; width: 100%; overflow: hidden} .l-doctors .l-cer-img_item{ width: auto !important} .l-doctors .l-cer-img_item> div{ padding: 5px} .l-doctors .l-cer-img_item> div img{ height: 155px} @media screen and (max-width: 991.98px){ .p-service .l-prize{ gap: 50px 0; justify-content: center} .m-prize .l-prize{ flex-wrap: wrap; gap: 5rem 0} .m-prize .l-prize> li{ width: 50%} .m-video{ padding: 20px 0} .m-video_inner{ flex-direction: column; gap: 20px} .l-video> li .vidplay, .m-video_main{ width: 100%} .m-video .m-btn{ text-align: center} .l-video{ flex: auto; padding-left: 0; height: auto; overflow: auto; display: flex; flex-wrap: wrap; margin: 0 -3px} .l-video> li{ width: 50%; padding: 0 3px; display: none} .l-video> li:first-child, .l-video> li:nth-child(2){ display: block} .l-doctors .l-cer-img .swiper-btn.swiper-button-disabled, .l-video> li .video-info{ display: none} .l-doctors_item{ gap: 2rem} .l-doctors_images{ width: 80%; margin: 0 auto 30px} .l-doctors_info{ width: 100%; padding-left: 0} .l-doctors_info .name{ font-size: 20px; line-height: 30px; text-align: center} .l-doctors_info_inner{ padding-bottom: 0; display: flex; flex-direction: column} .l-doctors_info_inner .m-btn{ text-align: center; order: 1; margin-top: 20px} .l-doctors .l-cer-img{ position: relative; bottom: auto; left: auto; width: auto; margin: 0 -10px; padding: 0 10px; border: none} .l-doctors .l-cer-img .swiper-btn{ width: 20px; height: 20px; display: block} .l-doctors .l-cer-img_item> div img{ height: 110px}} .p-doctung .mv .title{ position: absolute; font-size: 2.08vw; color: #025899; top: 15.0769%; left: 52.7083%} .p-doctung .mv .name{ top: 24.4615%; left: 52.7083%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-size: 3.12vw; padding-top: 1%} .p-doctung .mv .name::before{ content: ""; top: 0; left: 0; width: 100%; height: 2px} .p-doctung .mv .text{ position: absolute; top: 68.1538%; left: 53%; font-style: italic; font-size: 1.716vw; line-height: 1.1818; text-align: center} .about-bstung-banner{ background: url("../images/bs-tung/bg.jpg.webp") center/cover no-repeat} .about-bstung-banner .loibacsi{ max-width: 800px} .about-bs-banner{ background: url("/wp-content/uploads/2023/08/anh-nen-scaled.webp") center/cover no-repeat} .about-bs{ padding: 50px 0; margin-bottom: 50px} .about-bs .loibacsi quote{ padding: 30px 10px; position: relative; display: block} .about-bs .loibacsi quote::after, .about-bs .loibacsi quote::before{ position: absolute; content: ""; width: 29px; height: 20px; background-size: 100%; background-repeat: no-repeat} .about-bs .loibacsi quote::before{ top: 0; left: 0; background-image: url(../images/ico_quote.svg)} .about-bs .loibacsi quote::after{ bottom: 0; right: 0; background-image: url(../images/ico_quote_rev.svg)} .about-bs .loibacsi .text, .box-quote .text{ font-style: italic; color: #025899} .about-bs .loibacsi .signature{ display: block; font-weight: 700; font-size: 18px; line-height: 27px; color: #025899; text-align: right; margin-top: 27px} .about-bs .wrap{ display: flex; align-items: flex-end; gap: 40px} .about-bs .wrap .loibacsi, .block-diff .inner .img, .box-khuyencao .info, .l-3points_item .info, .m-goods_block .l-goods, .m-intro .explant .info, .m-veneer-best .content .l-veneer, .m-who .content .l-issues, .tragop-bef .info, .whats-tragop .info, .wrap-diff .block-diff{ flex: 1} .about-bs .wrap .img-doc{ width: 405px} @media screen and (max-width: 767px){ .l-social{ margin-bottom: 10px} .m-btn a, .m-btn button{ font-size: 16px; height: 35px} .l-doctors_thumb .thumb-item .name strong, .m-btn .submit-button{ font-size: 16px} .ttl-primary{ font-size: 20px; line-height: 30px; margin-bottom: 20px} .l-outstand a, .m-article table th, .m-prize .l-prize p, .page-bnr .left .text, .ttl-secondary{ font-size: 16px; line-height: 24px} .l-story .l-news_item .text, .m-doctors .l-doctors .doc-info .title, .ttl-border{ font-size: 18px; line-height: 27px} .m-doctors .l-doctors_inner::before, .m-reward .info, .p-doctung .mv .text, .ttl-border::before{ display: none} .m-contact{ padding: 38px 15px; background: url("../images/top/sp/bg_contact.png") center/cover no-repeat} .m-contact strong{ font-size: 18px; line-height: 27px; margin: 0 -15px} .m-about .ttl-secondary, .m-contact .ttl-primary{ font-size: 22px; line-height: 33px; margin-bottom: 10px} .m-contact p{ font-size: 16px; line-height: 24px; color: #535353} .cus-images .right, .l-doctors.is-special .l-doctors_images .img img, .l-ekip_item, .l-news_item, .l-trust_item, .m-article table, .m-contact .m-btn button, .m-doctors .l-doctors .doc-img .img img, .m-maps_item .maps-iframe, .m-maps_item .maps-info, .m-paper_item img, .tv-clip li{ width: 100%} .m-contact.is-reverse{ background: #fff; padding: 0 10px} .m-contact.is-reverse .wrapper{ padding: 29px 20px 45px; background: #025899; border-radius: 20px} .m-contact.is-reverse .ttl-primary{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent} .m-contact.is-reverse p, .m-contact.is-reverse strong{ color: #fff} .l-doctors_item, .m-kienthuc_main .l-news_item{ flex-direction: column} .l-news{ flex-direction: column; gap: 15px} .l-news_item .images{ height: 240px; position: relative; margin-bottom: 20px; border-radius: 10px} .l-news_item .images img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover} .l-news_item .info .title{ margin: 10px 0; font-size: 18px; line-height: 27px} .l-news_item .info .text{ font-size: 16px; line-height: 24px; margin-bottom: 10px} .text{ color: #535353} .l-doctors_thumb .thumb-item .name{ padding: 5px 2px} .l-doctors_thumb .thumb-item .name span{ font-size: 14px} .l-doctors_thumb a{ height: 50vw} .l-doctors_thumb a img, .m-doctors .l-doctors_thumb a img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top} .l-doctors.is-special .l-doctors_images .bg::before, .l-doctors.is-special .l-doctors_images::before{ content: ""; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); position: absolute} .l-doctors.is-special .l-doctors_info{ order: 2; padding: 20px 25px 0} .l-doctors.is-special .l-doctors_info .l-cer-img{ margin-top: 2rem} .l-doctors.is-special .l-doctors_info .certificate{ margin-bottom: 0} .l-doctors.is-special .swiper-prev{ left: 1px} .l-doctors.is-special .swiper-next{ right: 1px} .l-doctors.is-special .l-cer-img_item> div img{ height: 120px} .l-doctors.is-special .l-doctors_images{ width: auto; margin-top: 30px; order: 1; padding: 0 10px; position: relative; overflow: visible; margin-bottom: 0} .l-doctors.is-special .l-doctors_images .bg, .l-doctors.is-special .l-doctors_images .bg img{ position: relative} .l-doctors.is-special .l-doctors_images .bg::before{ width: 100%; height: 100%; border-radius: 50%; top: -7px} .l-doctors.is-special .l-doctors_images .img{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 61%} .l-doctors.is-special .l-doctors_images::before{ width: 100%; height: 4px; left: 0; bottom: 0; z-index: 1} .l-doctors_thumb.is-special .thumb-item, .m-doctors .l-doctors_thumb .thumb-item{ padding: 5px} .l-doctors_thumb.is-special .slick-slider{ padding: 0 40px} .intro, .m-customer, .m-news, .m-paper, .m-reward{ padding: 20px 0} .m-reward_inner, .page-bnr_inner, .tv-clip{ flex-direction: column; gap: 20px} .key-service .service-slide{ display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 0; padding-bottom: 30px} .key-service .service-slide_item{ max-width: 310px} .key-service .service-slide_item a{ width: 100%; max-width: 100%; height: 340px} .key-service .service-slide_item .service-name{ padding: 10px 31px 25px} .key-service .service-slide_item .service-name span{ font-size: 20px} .key-service .service-slide_item .service-name strong{ font-size: 30px; line-height: 1.5; max-width: 80%} .key-service .service-slide_item .service-name::before{ background-size: 100%; width: 85px; height: 85px; right: 25px} .key-service .service-slide_item::before{ width: 42px; height: 42px; background-size: 100%} .m-doctors{ padding-bottom: 12px} .m-doctors .slick-slider{ padding: 0 30px} .m-doctors .l-doctors{ background-position: left top} .l-cons_item .info, .m-doctors .l-doctors .wrapper{ padding: 0} .m-doctors .l-doctors_inner{ margin-top: 20px; padding: 0} .m-doctors .l-doctors_item{ flex-direction: column; margin-bottom: 0} .m-doctors .l-doctors_thumb{ margin-top: 12px} .m-doctors .l-doctors_thumb a{ height: 50vw; position: relative} .m-doctors .l-doctors .doc-info{ order: 2; padding: 20px 25px} .m-doctors .l-doctors .doc-info .name{ font-size: 20px; line-height: 30px; margin-bottom: 5px} .m-doctors .l-doctors .doc-img{ width: auto; margin-top: 30px; order: 1; padding: 0 10px; position: relative} .m-doctors .l-doctors .doc-img .img{ width: 61%} .m-doctors .l-doctors .doc-img::before{ position: absolute; content: ""; width: 100%; height: 4px; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); left: 0; bottom: 0; z-index: 1} .m-doctors .l-doctors .m-btn{ text-align: center} .m-prize .l-prize{ flex-wrap: wrap; gap: 30px 0; margin: 0 -20px} .m-prize .l-prize> li{ width: 50%; padding: 0 18px} .m-prize .l-prize .vec img{ height: 45px} .m-reward .img{ justify-content: center; padding: 0 20px} .m-customer .ttl-primary, .m-paper .ttl-primary{ margin-bottom: 5px} .m-customer .slick-slider, .m-paper .slick-slider{ padding: 0 20px} .m-customer_item, .m-paper_inner{ padding: 10px} .m-customer_item .image{ height: 79vw} .m-customer_item .info{ margin-top: 13px} .m-customer_item .info .cus-name{ font-size: 20px; line-height: 30px; margin-bottom: 6px} .m-customer_item .info .text{ font-size: 16px; line-height: 24px; text-align: justify; color: #535353; margin-bottom: 20px} .m-customer_item .info .m-btn a{ font-weight: 700} .about-bs .ttl-primary, .certificate, .m-commit_block .img, .m-kienthuc_main{ margin-bottom: 20px} .m-news .slick-slider{ padding: 0 5px} .box-short .l-short> li span, .m-news .l-news{ display: block} .m-kienthuc{ padding: 40px 0} .m-kienthuc_main .l-news_item .images{ width: 100%; order: 1; margin-left: 0; margin-bottom: 28px} .m-kienthuc_list .l-news{ gap: 30px 0} .m-article .text-intro{ margin: 0 -10px; background: #e4f4ff; padding: 10px} .m-article table th:first-child{ width: 120px} .m-article table td{ font-size: 15px; line-height: 22px; text-align: left} .m-detail_head-right{ flex-wrap: wrap; gap: 10px} .m-detail_side{ flex-direction: column; align-items: center} .box-doctor{ flex-direction: column; gap: 10px; padding: 10px} .box-doctor .right{ width: auto; flex-direction: row} .box-doctor .m-btn a{ width: 115px} .p-contact main{ display: flex; flex-direction: column} .p-contact main .m-maps{ order: 1} .p-contact main .contact-information{ order: 2} .p-contact main .m-contact{ order: 3; margin-bottom: 13px} .m-maps_item{ flex-direction: column-reverse} .m-maps_item .maps-info .phone, .m-maps_item .maps-info address{ padding-left: 24px} .l-filter{ flex-direction: column; margin-top: 0; gap: 15px} .l-filter a{ font-size: 18px; line-height: 27px; padding-left: 3px; padding-right: 3px; min-width: 260px; text-align: center} .l-story{ gap: 20px 0} .box-short .l-short{ gap: 0} .l-ekip_item.support{ width: 50%; flex-direction: column} .l-ekip_item.support .info{ padding-left: 0; text-align: center; margin-top: 10px} .cus-images{ flex-wrap: wrap} .cus-images .left{ width: 100%; padding-right: 0; flex: auto; margin-bottom: 17px} .cus-images .big-img{ width: 53%; height: 60vw; border-radius: 10px} .cus-images .small-img .ig{ height: 28.6vw; border-radius: 10px} .cus-images .small-img .ig::before{ width: 58px; font-size: 14px; line-height: 24px; padding: 1px 3px} .cus-images .cus-info{ display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px} .l-cons_item{ flex-direction: column; gap: 10px; position: relative; padding: 0; background: 0 0} .l-cons_item .img{ width: 36px; height: 36px; position: absolute; left: 0; top: -5px} .l-cons_item .img img{ height: 19px} .l-cons_item .info .ttl-bl{ padding-left: 50px} .l-trust_item .img{ width: 266px; height: 266px; margin-bottom: -133px} .l-trust_item .info{ padding-top: 150px} .m-video.is-short .l-video> li{ width: 50%; display: block} .page-bnr{ background: url(/wp-content/themes/i-dent/assets/images/about/sp/bg.png.webp) left top/cover no-repeat; margin-top: 0} .page-bnr .left{ flex: auto} .page-bnr .left .ttl-primary{ font-size: 22px; line-height: 33px} .page-bnr .left strong img{ height: 24px} .page-bnr .right{ width: 300px; height: 300px} .m-about_block--is-col{ flex-direction: column; margin-bottom: 27px} .m-about_block--is-col .right, .p-doctung .mv .btn img{ width: 100%} .m-about_block--is-col .left{ flex: auto; padding-right: 0} .l-slogan_item .info .text, .m-about .text{ color: #000} .box-nd{ margin: 0 -10px 28px} .box-nd .title{ text-align: left; font-size: 20px; line-height: 30px; padding: 8px 10px 4px} .box-nd_inner{ padding: 12px 16px} .l-slogan{ margin: 0 0 27px; gap: 27px 0} .l-slogan_item{ width: 100%; padding: 0; align-items: flex-start} .l-slogan_item:first-child .img img{ height: 53px; left: 7px !important; top: 6px !important} .l-slogan_item .img{ width: 70px; height: 70px} .l-slogan_item .img img{ height: 38px} .l-slogan_item .info strong{ text-align: left; border: none; padding-bottom: 0} .p-about .m-contact{ margin-bottom: 30px} .l-noibat_item .ico{ width: 149px; padding: 10px} .l-noibat_item .ico img{ height: 35px} .m-commit{ background: #fff} .m-commit_block{ flex-direction: column; gap: 10px; margin-bottom: 0} .m-commit_block .l-commit{ padding: 0; order: 2; margin: 0 -10px} .m-commit_block .l-commit_item{ padding: 8px 13px} .p-doctung .mv .btn, .p-doctung .mv .name, .p-doctung .mv .title{ left: 50%; transform: translateX(-50%)} .p-doctung .mv .title{ top: 3.0769%; white-space: nowrap; font-size: 7vw} .p-doctung .mv .name{ font-size: 9.12vw; white-space: nowrap; padding-top: 2%; top: 9.4615%} .p-doctung .mv .btn{ position: absolute; width: 44%; top: 41%} .about-bs .loibacsi quote::after, .about-bs .loibacsi quote::before{ width: 24px; height: 17px} .about-bs .loibacsi quote::before{ top: 7px; left: 10px} .about-bs .loibacsi quote::after{ bottom: 10px; right: 7px} .about-bs .loibacsi .img{ max-width: 265px; margin: 0 auto 10px}} .hocvan .gr-images{ display: flex; gap: 10px; margin-bottom: 30px} .hocvan .gr-images .big-img{ width: 66.916%} .hocvan .gr-images .small-img{ width: 32.333%; display: flex; flex-direction: column; gap: 10px} .hocvan .l-doctors_info, .l-doctors.is-special .l-doctors_info, .p-service .l-doctors_info{ padding-left: 30px} .hocvan .l-doctors_info .l-cer-img, .p-service .l-doctors_info .l-cer-img{ border: none; padding: 0 10px; width: 99%; overflow: visible} .hocvan .l-doctors .swiper-prev, .l-doctors.is-special .swiper-prev, .p-service .l-doctors .swiper-prev{ left: -23px} .hocvan .l-doctors .swiper-next, .l-doctors.is-special .swiper-next, .p-service .l-doctors .swiper-next{ right: -23px} .video .fig-title{ text-align: center; font-size: 18px; line-height: 27px; color: #025899; margin-top: 19px} .l-demo{ display: flex; flex-wrap: wrap; margin: 0 -15px} .l-demo_item{ width: 50%; padding: 0 15px; margin-bottom: 50px} .l-demo_item .wrap{ padding: 10px 9px 10px 16px; background: #fff; border-radius: 20px; overflow: hidden} .l-demo_item .demo-img{ display: flex; justify-content: space-between; margin-bottom: 33px} .l-demo_item .demo-img .img-big{ width: 54.6112%} .l-demo_item .demo-img .img-small{ width: 44.11%; display: flex; flex-direction: column; justify-content: space-between} .l-demo_item .demo-img .img-small .img{ position: relative; border-radius: 20px; overflow: hidden} .l-demo_item .demo-img .img-small .img::before{ position: absolute; width: 90px; background: #025899; color: #fff; font-size: 18px; line-height: 27px; padding: 3px 13px; bottom: 0; left: 0; border-top-right-radius: 20px; box-sizing: border-box} .l-demo_item .demo-info_name{ display: flex; justify-content: space-between; margin-bottom: 21px} .l-demo_item .demo-info_name .name{ font-size: 22px; line-height: 27px; color: #025899} .hinhdanh strong, .l-demo_item .demo-info_name .lca, .m-review_info .lca, .m-review_info .name .nm small, .m-review_info .name span{ font-size: 18px; line-height: 27px} .l-demo_item .demo-info_name .lca{ font-weight: 700; color: #535353} .l-demo_item .demo-info .implant, .l-demo_item .demo-info .type{ font-size: 18px; line-height: 27px; color: #535353; padding-left: 40px} .l-demo_item .demo-info .type{ background: url(../images/bs-tung/ico_plant.svg) left top 3px no-repeat; margin-bottom: 8px} .l-demo_item .demo-info .implant{ background: url(../images/bs-tung/ico_implant.svg) left 6px top 4px no-repeat} .m-review{ display: flex; margin-bottom: 15px} .m-review_img{ width: 49.25%; overflow: hidden; border-radius: 20px} .m-review_img img{ width: 100%; height: 385px} .m-review_info{ width: 50.75%; padding-left: 9px; border-radius: 20px} .m-review_info .head{ display: flex; justify-content: space-between; align-items: flex-end; background: #025899; border-radius: 20px 20px 0 0; padding: 13px} .m-review_info .body{ background: #e4f4ff; padding: 31px 13px 25px; border-radius: 0 0 20px 20px} .m-problem .right{ border-radius: 30px; overflow: hidden} @media screen and (min-width: 767px){ .table-common{ width: 1200px} td.w01, th.w01{ width: 270px} .m-review_info .body{ height: 300px}} .m-review_info .body .text{ position: relative; margin-bottom: 0} .box-quote::after, .box-quote::before, .m-review_info .body .text::after, .m-review_info .body .text::before{ position: absolute; content: ""; width: 21px; height: 15px; background-size: 100%; background-repeat: no-repeat} .m-problem, .p-all-in .m-paper, .p-promotion .intro, .p-promotion .m-video, .p-service .m-paper{ background: #f7f7f7} .m-review_info .body .text::before{ top: -19px; left: 0; background-image: url(../images/ico_quote.svg)} .m-review_info .body .text::after{ bottom: -19px; right: 0; background-image: url(../images/ico_quote_rev.svg)} .m-review_info .name{ width: 100%; position: relative} .m-review_info .name span{ display: block; color: #fff} .m-review_info .name .nm{ display: flex; align-items: center; color: #fff; font-weight: 700; font-size: 22px; line-height: 33px} .m-review_info .name .nm small{ font-weight: 400; margin-left: 14px; margin-top: 3px} .m-review_info .lca{ color: #fff; position: absolute; bottom: 0; right: 0} .m-review.is-reverse .m-review_info{ order: 1; padding-left: 0; padding-right: 9px} .l-clip{ display: flex; flex-wrap: wrap; margin: 0 -16px 40px} .gr-img, .hinhdanh .wrap{ justify-content: space-between; display: flex} .l-clip li{ width: 50%; padding: 0 16px} .hinhdanh .wrap{ gap: 20px} .hinhdanh strong{ font-weight: 400; display: block; text-align: center; color: #025899; margin-top: 20px} .p-doctung .l-paper{ display: flex; margin: 0 -23px} .p-doctung .m-paper{ background: #f7f7f7; padding-top: 17px} .p-doctung .m-paper_item{ width: 33.3333%} .p-basis .mv .ttx{ position: absolute; font-size: 2.6vw; top: 23.0769%; left: 35%; font-weight: 400} .p-basis .mv .ttl, .p-basis .mv strong{ width: 38.1771%; left: 26.875%; position: absolute} .p-basis .mv strong{ display: flex; justify-content: center; background: #025899; height: 12.7692%; top: 34.4615%} .p-basis .mv strong img{ width: 37.10777%} .p-basis .mv .ttl{ top: 51.5385%} .p-basis .mv .btn{ position: absolute; width: 14.0625%; top: 73.5385%; left: 38.8542%} .gr-img{ position: relative; flex-wrap: wrap; margin-bottom: 20px} .gr-img .big-img{ width: 60.4167%} .gr-img .side-img{ width: 38.9167%} .gr-img .small-img{ width: 38.9167%; position: absolute; bottom: 0; right: 0; display: flex; justify-content: space-between} .gr-img .small-img .img{ width: 49.2505%} .gr-img.gr02 .big-img{ width: 49.5833%} .gr-img.gr03 .big-img{ width: 59.75%} .gr-img.gr03 .big-img.small{ width: 39.0833%} .p-camket .article-title{ margin-bottom: 10px; margin-top: 30px} .p-all-in .mv, .p-promotion .mv, .p-service .mv{ position: relative; display: block} .p-service .mv .ttl{ position: absolute; font-size: 2.08vw; top: 19.38461%; left: 9.375%; font-weight: 400; color: #025899} .p-service .mv .txt{ position: absolute; font-size: 1.5vw; top: 60%; left: 9.375%; font-style: italic; line-height: 1.5; text-align: center; color: #2b2b2b} .p-service .mv .btn{ position: absolute; width: 14.5%; left: 18.791%; top: 76.46153%} .p-service .l-doctors_info .certificate{ margin-bottom: 19px} .p-service .m-prize{ margin-top: 30px; padding: 50px 0} .m-problem{ padding: 50px 0; margin-bottom: 30px} .m-problem .left{ flex: 1; padding-right: 55px} .m-problem .right{ width: 509px} .l-check li{ font-size: 18px; line-height: 27px; padding-left: 35px} .l-giaiphap{ display: flex; gap: 10px; margin-bottom: 50px} .l-giaiphap li{ width: 25%; text-align: center} .l-bra-price_item .img img{ position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover} .m-chuyensau{ padding: 20px 0; background: #f7f7f7; margin-bottom: 38px} .box-quote{ background: linear-gradient(90deg, #e4f4ff 0, rgba(255, 255, 255, 0.5) 104.5%); padding: 11px 50px; position: relative} .box-quote::before{ top: 6px; left: 8px; background-image: url(../images/ico_quote.svg)} .box-quote::after{ bottom: 8px; right: 6px; background-image: url(../images/ico_quote_rev.svg)} .m-flow{ padding-top: 50px; padding-bottom: 30px; background: #f7f7f7; margin-bottom: 30px} .l-flow_item{ display: flex; align-items: center; background: linear-gradient(90deg, #e4f4ff 0, rgba(255, 255, 255, 0.5) 104.5%); border-radius: 25px; overflow: hidden; border-left: 25px solid #025899; padding: 13px 0 13px 40px; margin-bottom: 30px} .l-flow_item .img{ width: 200px} .l-flow_item .info{ flex: 1; padding-right: 75px} .l-flow_item .info .ttl-secondary, .l-implants_type .info .ttl-secondary, .m-promo .ttl-primary, .m-worry_content .l-worry .ttl-secondary, .mb-5, .tragop-bef .info .ttl-bl{ margin-bottom: 5px} .box-uudai{ background: #025899; padding: 33px 0 43px; margin-bottom: 50px} .box-uudai .l-outstand li a, .m-promo .l-outstand li a{ padding-left: 40px} .box-uudai .l-outstand li::after{ position: absolute; content: "."; width: 4px; height: 4px; border-radius: 3px; left: 23px; top: 20px; background: #000} .l-uudai{ margin: 0 -9px 40px; display: flex; flex-wrap: wrap} .l-uudai_item{ width: 25%; padding: 0 9px} .l-uudai_item .inner{ background: #fff; border: 2px solid #025899; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); border-radius: 30px; overflow: hidden} .l-uudai_item .heading{ text-align: center; font-weight: 700; font-size: 18px; line-height: 1; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); border-bottom: 2px solid #025899; padding: 15px 2px 7px} .l-uudai_item .heading strong{ display: block; font-size: 25px; line-height: 38px; color: #025899; margin-top: -5px} .l-uudai_item .body{ padding: 8px 0 18px} .l-uudai_item .body .img{ width: 200px; margin: 0 auto 20px; position: relative} .l-uudai_item .body .img .ico{ position: absolute; top: 6px; right: -29px; z-index: 1} .l-uudai_item .body .img_inner{ width: 200px; height: 200px; position: relative; overflow: hidden; border: 2px solid #025899; border-radius: 50%} .l-uudai_item .body .price{ display: block; text-align: center; font-size: 25px; line-height: 1} .l-uudai_item .body .price.text{ font-size: 22px; line-height: 33px; color: #025899; margin-bottom: -8px} .l-uudai_item .body .price.current-price{ font-size: 30px; line-height: 45px; text-align: center; color: #025899} .l-uudai_item .body .price.new-price{ font-size: 30px; line-height: 1; background: linear-gradient(270deg, #ff1f1f 0, rgba(255, 105, 105, 0.932292) 50%, #ff1f1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; display: flex; justify-content: center; margin-top: 4px} .l-uudai_item .body .price.new-price small{ font-size: 20px} .l-uudai_item .body .m-btn a{ font-size: 18px; line-height: 27px; height: 34px} @media screen and (max-width: 1150px){ .l-uudai{ gap: 20px 0} .l-uudai_item{ width: 50%}} .m-faq{ padding-bottom: 34px; margin-top: 20px} .l-faq_item{ padding: 30px 0; border-bottom: 1px solid #025899} .l-faq_item .heading{ display: flex; justify-content: space-between; gap: 10px} .l-faq_item .m-btn a{ font-size: 15px; line-height: 22px; height: 30px; padding: 0 2px; min-width: 79px} .l-faq_item .answer{ padding: 20px 0 0 26px; display: none} .l-faq_item .answer .text strong{ display: block; font-weight: 700} .l-faq.is-special .answer{ padding-left: 0} .m-cus{ padding-top: 40px} .p-all-in .mv .text{ position: absolute; left: 15.4166%; top: 19.5385%; font-size: 2.08vw; color: #025899; line-height: 1} .p-all-in .mv .ttl{ position: absolute; top: 28.76923%; left: 19.6875%; font-size: 2.6vw; background: linear-gradient(270deg, #ff1f1f 0, rgba(255, 105, 105, 0.932292) 50%, #ff1f1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-weight: 700} .p-all-in .mv .txt{ position: absolute; font-size: 1.352vw; top: 64.38461%; left: 9.28125%; font-style: italic; text-align: center; color: #2b2b2b; line-height: 1.5} .p-all-in .mv .btn{ position: absolute; width: 14.5%; left: 18.94791%; top: 79.6923%} .p-all-in .m-doc-demo{ background: #f7f7f7; padding: 30px 0 1px; margin-bottom: 30px} .about-doctors.no-bg, .p-all-in .intro, .p-promotion .m-customer{ background: #fff} .m-worry_content{ display: flex; justify-content: space-between; gap: 20px; background: linear-gradient(90deg, #e4f4ff 0, rgba(255, 255, 255, 0.5) 104.5%); border-radius: 30px 0 0 30px; position: relative; padding: 14px 0 14px 60px} .m-worry_content::before{ position: absolute; content: ""; width: 14px; height: calc(100% - 16px); left: 0; top: 50%; transform: translateY(-50%); background: #025899; border-radius: 30px 0 0 30px} .m-worry_content .img{ width: 383px} .m-worry_content .l-worry{ max-width: 670px; flex: 1; display: flex; flex-direction: column; gap: 23px} .m-tech, .tragop-credit{ padding: 30px 0; background: #f7f7f7} .m-tech_info{ margin-top: 45px; display: flex} .m-tech_info .img{ width: 330px} .m-tech_info .content{ flex: 1; padding-left: 40px} .m-tech_info .content .ttl-secondary{ border-bottom: 1px solid #025899; margin-bottom: 15px} .m-tech_info .content_block{ margin-bottom: 48px} .l-dots li, .l-goods .ttl-secondary{ position: relative; padding-left: 20px} .m-goods_block{ display: flex; gap: 70px; margin-bottom: 30px} .m-goods_block.is-rev .img{ order: 1} .box-check .l-check, .l-3points, .l-goods{ display: flex; flex-direction: column; gap: 20px} .l-goods .ttl-secondary{ margin-bottom: 8px} .l-goods .ttl-secondary::before{ position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; left: 0; top: 14px; background: #025899} .m-risks{ margin-top: 30px; padding-bottom: 30px} .l-risk{ display: flex; flex-wrap: wrap; gap: 20px 0; margin: 0 -30px} .l-risk_item{ width: 50%; padding: 0 30px} .l-risk .ttl{ max-width: 343px; padding: 9px 0 9px 10px; background: #025899; border-radius: 0 30px 0 0; margin-bottom: 20px} .l-steps_block .title, .warning .ttl{ line-height: 27px; border-radius: 0 20px 0 0} .m-why{ background: url(../images/allinone/bg_why.jpg) right center/cover no-repeat; padding: 30px 0} .m-why .text{ max-width: 825px; text-align: justify} .l-3points_item{ display: flex; gap: 50px} .l-3points_item .img{ width: 400px} .l-3points_item .info .title{ display: flex; align-items: center; max-width: 340px; background: #e4f4ff; border-radius: 20px; margin-bottom: 13px} .l-3points_item .info .point{ font-weight: 700; color: #fff; font-size: 34px; line-height: 51px; width: 38px; height: 38px; border-radius: 50%; background: #025899; display: flex; align-items: center; justify-content: center; margin-right: 17px} .bg-uudai .btn{ position: absolute; width: 14.5%; left: 19.0625%; top: 80.18181%} .m-phacdo .heading .ttl-primary{ margin-bottom: 7px} .l-dots{ font-size: 18px; line-height: 27px; margin: 13px 0; padding-left: 18px} .l-dots li::before{ position: absolute; content: ""; width: 4px; height: 4px; border-radius: 50%; background: #000; top: 11px; left: 4px} .note{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); font-weight: 700; padding: 7px 17px 6px; margin-bottom: 30px} .l-steps_block .title{ max-width: 475px; background: #e4f4ff; padding: 3px 13px; font-size: 18px; color: #025899; margin-bottom: 20px} .warning .ttl{ font-size: 18px; color: #fff; background: #025899} .l-steps_block .img{ text-align: center; margin-bottom: 80px} .warning{ margin-top: 30px; margin-bottom: 20px} .warning .ttl{ font-weight: 700; padding: 2px 22px; margin-bottom: 20px; display: inline-block} .warning .img{ border: 1px solid #025899; padding: 10px} .m-aboutident::after, .m-aboutident::before{ position: absolute; width: 100%; z-index: 0; height: 100%; left: 0; content: ""} .p-promotion .mv .btn{ position: absolute; width: 14.5%; left: 13%; top: 75%} .m-aboutident{ padding-top: 40px; padding-bottom: 30px; position: relative; margin-top: -7%} .m-aboutident::before{ background: url(../images/promotion/bg_yellow.svg) top center/cover no-repeat; top: -9px} .m-aboutident::after{ background: url(../images/promotion/bg_blue.svg) top center/cover no-repeat; top: 0} .m-aboutident .ttl-primary span{ display: block; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent} .block-diff .block-child .info, .m-aboutident_inner, .m-contact.v1-contact-has-bg> .wrapper{ position: relative; z-index: 1} .m-aboutident .m-about{ display: flex; justify-content: center; gap: 50px} .l-demo.is-one .l-demo_item .demo-info_name .lca, .l-tooths_item .content strong, .l-uudai_item .body .warranty{ font-size: 18px; line-height: 27px} .bracer-situation, .m-promo{ padding: 30px 0 20px} .m-promo .m-tag{ text-align: center; margin-bottom: 30px} .m-promo.is-ceramic .l-uudai{ justify-content: center; gap: 30px 50px; margin: 0 0 30px} .m-promo.is-ceramic .l-uudai_item{ padding: 0; max-width: 287px} .m-promo .l-outstand li::after{ position: absolute; content: ""; width: 4px; height: 4px; border-radius: 3px; left: 23px; top: 20px; background: #000} .bnr-customer{ padding-bottom: 30px; position: relative} .bnr-customer .wrapper{ padding: 0} .bnr-customer .is-small{ position: absolute; width: 87.9487%; left: 50%; top: 50%; transform: translate(-50%, -50%)} .about-doctors, .special-offer{ background: #f7f7f7; padding: 30px 0} .l-tooths_item, .m-ungdung{ padding-bottom: 20px} .intro-text, .m-loairang, .m-tragop-intro{ margin-top: 30px} .intro-text{ margin-bottom: 30px} .tooth-block .doc-intro{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); margin-bottom: 10px} .tooth-block .doc-intro .text{ margin-bottom: 0; color: #025899} .l-tooths_item{ margin-bottom: 20px; border-bottom: 1px solid #025899} .l-tooths_item .content{ display: flex; gap: 14px} .l-tooths_item .content .img{ width: 218px} .l-tooths_item .content .info{ flex: 1; display: flex; flex-direction: row; gap: 9px} .l-tooths_item .content .info_block{ padding: 7px 20px 12px; background: #e4f4ff; border-radius: 20px; width: calc(50% - 20px)} .info_block_title{ background-color: #025799; margin: -7px -20px 10px; padding: 8px 20px; border-top-left-radius: 15px; border-top-right-radius: 15px; color: #025899} .l-tooths_item .content strong{ display: inline-block; color: #025899; margin-bottom: 2px} .l-tooths_item .content .info .l-content{ font-size: 1.8rem; line-height: 1.7} .l-type_item{ background: linear-gradient(90deg, #e4f4ff 0, rgba(255, 255, 255, 0.5) 104.5%); border-radius: 20px; overflow: hidden; margin-bottom: 20px} .l-type_item.type01 .inner{ background-image: url(../images/loairangsu/bg_girl_01.png); background-position: bottom left 43%} .l-type_item.type02 .inner{ background-image: url(/wp-content/uploads/2023/12/1_Rang-su-Lava-Plus-09-e1702090951889.png)} .l-type_item.type03 .inner{ background-image: url(../images/loairangsu/bg_girl_03.png)} .l-type_item.type04 .inner{ background-image: url(../images/loairangsu/bg_girl_04.png)} .l-type_item.type05 .inner{ background-image: url(../images/loairangsu/bg_girl_05.png)} .l-type_item.type06 .inner{ background-image: url(../images/loairangsu/bg_girl_06.png)} .l-type_item.type07 .inner{ background-image: url(/wp-content/uploads/2023/08/mau.png)} .l-type_item.type08 .inner{ background-image: url(/wp-content/uploads/2023/12/mau-rang-su-chrom-cobalt.png)} .l-type .ttl-background{ border-radius: 0} .l-type .inner{ background-repeat: no-repeat; background-position: bottom center; display: flex; justify-content: space-between; align-items: center; padding-top: 30px; padding-left: 16px} .l-type .l-check{ width: 245px} .l-type .box-img{ width: 272px; display: flex; flex-direction: column; gap: 6px} .box-khuyencao{ display: flex; align-items: center; gap: 30px; margin-bottom: 30px} .box-khuyencao .m-btn a{ height: 34px; font-size: 18px} .m-intro .explant{ display: flex; align-items: center; gap: 40px} .l-issues.is-3-col .l-issues_item, .m-intro .explant .img{ width: 280px} .m-intro .explant .text{ margin-bottom: 20px; text-align: justify} .m-intro .explant .text a{ text-decoration: underline; color: #2b2b2b} .m-cus-danhgia, .m-who{ padding: 20px 0; background: #f7f7f7} .m-who .content{ display: flex; gap: 22px} .m-who .content .img{ width: 49.8333%} @media screen and (max-width: 860px){ .about-bs .wrap, .m-who .content{ flex-direction: column} .about-bs .wrap .loibacsi{ max-width: 100%} .about-bs .wrap .loibacsi .text{ text-align: justify} .about-bs .wrap .img-doc{ width: 100%; text-align: center} .m-who .content .img, .m-who .content .img img{ width: 100%}} .l-issues{ display: flex; flex-wrap: wrap; gap: 24px 0; margin: 0 -12px} .l-issues_item{ padding: 0 12px; width: 50%} .l-issues_item .inner{ border: 1px solid #025899; border-radius: 20px; height: 100%; text-align: center; padding-top: 28px; padding-left: 20px; padding-right: 20px; background: #fff} .l-issues_item .img-ham{ margin-bottom: 12px} .l-issues_item .text{ color: #025899; margin-bottom: 0; text-align: center} .box-text{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); padding: 15px 0} .m-tooth-type .tooth-type{ background: 0 0; margin-bottom: 0} .m-tooth-flow{ padding: 30px 0 20px; background: #f7f7f7} .m-tooth-flow .vidplay::after{ width: 82px; height: 82px; background-size: 100%} .m-promo-normal .l-uudai{ margin-top: 40px; margin-bottom: 0} .l-uudai{ gap: 20px 0} .l-uudai_item.is-blue .heading{ background: #025899; color: #fff; font-weight: 400; padding: 9px 2px 5px} .l-uudai_item .body .warranty{ text-align: center; margin-bottom: 10px} .l-uudai_item .body .box-price{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px} .box-check{ background: #e4f4ff; padding: 30px 0} .l-doctors.is-special .l-doctors_info .l-cer-img{ border: none; padding: 0 10px; width: 97%; overflow: visible} .l-doctors.is-special .l-cer-img_item> div img{ height: 152px; width: auto} .l-demo.is-one{ margin: 0 -12px; padding: 0 9px} .l-demo.is-one .l-demo_item{ width: 33.333%; padding: 0 12px} .l-demo.is-one .l-demo_item .wrap{ padding: 10px 0 0; border-radius: 10px} .l-demo.is-one .l-demo_item .demo-info{ padding: 19px 10px 30px} .l-demo.is-one .l-demo_item .demo-info_name{ margin-bottom: 9px} .l-demo.is-one .l-demo_item .demo-info .type{ background: 0 0; padding-left: 0; min-height: 160px} .l-demo.is-one .l-demo_item .demo-info .implant{ background: 0 0; padding-left: 0; font-style: italic; font-weight: 700; color: #535353} .m-video.is-special{ padding: 0 0 30px; background: #f7f7f7} .p-tooth-ceramic .m-faq{ padding-top: 30px} .p-tooth-ceramic .mv .title{ position: absolute; color: #025899; font-weight: 400; font-size: 1.82vw; top: 14%; left: 18.4375%} .p-tooth-ceramic .mv .name{ position: absolute; background: linear-gradient(270deg, #ff1f1f 0, rgba(255, 105, 105, 0.932292) 50%, #ff1f1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-weight: 700; font-family: "UTM Times"; font-size: 2.34vw; top: 22.1538%; left: 16.0938%} .p-tooth-ceramic .mv .btn{ position: absolute; top: 78.8125%; width: 14.5%; left: 19.6458%} .implant-points{ display: flex; justify-content: space-between; margin: 0 -15px} .implant-points_block{ width: 33.333%; padding: 0 15px} .implant-points_block .img{ width: 100px; margin: 0 auto 20px} .implant-points_block .ttl-bl{ text-align: center; margin-bottom: 10px} .implant-points.is-bg{ padding-bottom: 124px; background: url(../images/implant/img_01.png) top center/19% no-repeat} .block-dacdiem_item .title, .l-implants_type .info .box .title{ color: #fff; background: #025899; font-size: 18px; line-height: 27px} .l-implants{ display: flex; flex-direction: column; gap: 70px} .l-implants_type{ display: flex; gap: 10px} .l-implants_type .info{ width: 512px} .l-implants_type .info .ex-point{ font-size: 18px; line-height: 27px; margin-bottom: 5px; display: block} .l-implants_type .info .manufacturer{ font-size: 18px; line-height: 27px; text-align: justify; color: #2b2b2b; margin-bottom: 10px} .l-implants_type .info .manufacturer span{ font-weight: 700; color: #025899; margin-right: 3px} .l-implants_type .info .box{ border-radius: 10px; overflow: hidden; background: #e4f4ff; margin-bottom: 10px; min-height: 290px} .l-implants_type .info .box .l-dots{ padding-right: 10px} .l-implants_type .info .box .title{ font-weight: 700; padding: 5px; text-align: center} .l-implants_type .info .price{ text-align: center; font-weight: 700; font-size: 18px; line-height: 27px; color: #025899; padding: 8px; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); border-radius: 10px} .l-implants_type .img{ flex: 1; display: flex; flex-direction: column; align-items: center} .l-implants_type:nth-child(2n), .l-tooths.is-bracer .l-tooths_item:nth-child(2n){ flex-direction: row-reverse} .m-dacdiem{ margin-top: 35px; margin-bottom: 30px} .block-dacdiem{ display: flex; flex-direction: column; gap: 30px} .block-dacdiem_item .title{ text-align: center; padding: 9px; border-radius: 20px 0} .block-dacdiem_item .inner{ padding-top: 35px} .block-dacdiem_item .l-dots{ margin-top: 0; padding: 0} .block-dacdiem_item.dd01 .inner{ padding-left: 46%; background: url(../images/implant/img_03.png) left center/50% no-repeat} .block-dacdiem_item.dd02 .inner{ padding-right: 46%; background: url(../images/implant/img_02.png) right -12px center/55% no-repeat} .block-diff .block-child.first .info{ max-width: 344px; margin-top: 30px} .block-diff .block-child.first .img{ flex: 1; display: flex; justify-content: center; margin-right: 100px} .block-diff .block-child.second{ align-items: flex-end; flex-direction: row-reverse; position: relative; margin-top: 40px} .block-diff .block-child.second .info{ max-width: 484px} .block-diff .block-child.second .img{ display: flex; position: absolute; left: -50px; top: -160px} .block-diff .inner{ display: flex; align-items: center; gap: 20px} .block-diff .inner .l-tech{ width: 530px} .block-diff .l-tech{ display: flex; flex-direction: column; gap: 35px} .block-diff .l-tech li{ display: flex; align-items: center; position: relative; padding-left: 100px} .block-diff .l-tech li span, .l-benefit_item .title{ align-items: center; background: #025899; display: flex} .block-diff .l-tech li span{ border-radius: 20px; justify-content: center; flex-shrink: 0; width: 65px; height: 100%; position: absolute; left: 0; top: 0} .block-diff .l-tech li .content{ max-width: 293px} .block-diff .l-tech li .content .ttl-bl{ text-align: left; margin-bottom: 2px} .block-diff .l-tech li .content .text{ margin-bottom: 0; text-align: justify} .block-diff .l-tech li:first-child::before{ position: absolute; content: ""; width: 73px; height: 74px; background: url(../images/implant/line_01.png) no-repeat; left: 30px; bottom: -65px} .block-diff .l-tech li:nth-child(2){ margin-left: 100px} .block-diff .l-tech li:nth-child(3)::before{ position: absolute; content: ""; width: 73px; height: 74px; background: url(../images/implant/line_02.png) no-repeat; left: 30px; top: -65px} .block-diff .l-tech li:nth-child(3) .content{ max-width: 404px} @media screen and (max-width: 840px){ .block-diff .block-child.second .info{ max-width: 400px}} .wrap-diff{ display: flex; gap: 20px} .wrap-diff .img{ width: 387px} .wrap-diff .block-diff .ttl-bl{ text-align: left; margin-bottom: 10px} .p-bracer .mv .ttl{ position: absolute; line-height: 1; font-size: 2.08vw; color: #025899; top: 16%; left: 24.6354%; font-weight: 400} .p-bracer .mv .ttl strong{ font-weight: 700; margin-right: 5px} .p-bracer .mv .txt{ position: absolute; background: #025899; padding: 5px 16px; line-height: 1; font-size: 1.56vw; top: 24.1538%; left: 24.1666%; color: #fff; border-radius: 30px} .p-bracer .mv .btn{ position: absolute; top: 82.8125%; width: 14.5%; left: 28.6458%} .bracer-benefit{ padding: 15px 0; background: #f7f7f7} .l-benefit{ display: flex; flex-wrap: wrap; margin: 0 -33px; gap: 30px 0} .l-benefit_item{ width: 50%; padding: 0 33px} .l-benefit_item .title{ border-radius: 30px 30px 0; margin-bottom: 15px} .l-benefit_item .title .order, .l-bra-price_item .img::before, .l-bra-price_item .price span, .l-veneer_item .order{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%)} .l-benefit_item .title .order{ display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-size: 25px; line-height: 38px; color: #025899; flex-shrink: 0} .l-benefit_item .title .ttl{ font-size: 22px; line-height: 33px; color: #fff; margin-left: 17px} .l-issues{ justify-content: center} .l-issues.is-3-col{ padding: 0 70px} .l-tooths.is-bracer{ margin-top: 52px; display: flex; flex-direction: column; gap: 20px} .l-tooths.is-bracer .l-tooths_item{ display: flex; gap: 20px; border: none; padding: 0; margin: 0} .l-tooths.is-bracer .content{ display: block; flex: 1} .l-tooths.is-bracer .content .ttl-background{ border-radius: 10px 10px 0 0; font-size: 22px; line-height: 33px} .l-banks, .l-bra-price{ flex-wrap: wrap; display: flex} .m-bracer-price .l-bra-price{ margin-top: 50px} .l-bra-price{ gap: 20px; justify-content: center} .l-bra-price_item{ width: 287px; background: #025899; border: 1px solid #025899; border-radius: 30px; padding: 14px 15px 28px} .l-bra-price_item .img{ width: 204px; height: 204px; border-radius: 50%; position: relative; margin: 0 auto 30px} .l-bra-price_item .img::before{ position: absolute; content: ""; width: 100%; height: 100%; border-radius: 50%; left: 0; bottom: -5px} .l-bra-price_item .name{ text-align: center; color: #fff; font-size: 18px; line-height: 27px} .l-bra-price_item .price{ display: flex; align-items: center; text-align: center; min-height: 60px} .l-bra-price_item .price span{ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-size: 25px; font-weight: 700} .l-bra-price_item .m-btn{ text-align: center; margin-top: 3px} .l-doctors.is-single .l-doctors_info_inner{ padding-bottom: 0} .l-doctors.is-single .doc-intro{ padding: 5px; margin: 0; border-radius: 10px} .l-doctors.is-single .doc-intro .l-dots{ margin: 0; padding-left: 0} .p-veneer .mv .title{ position: absolute; font-size: 2.08vw; color: #025899; line-height: 1; padding: 9px 3%; border-radius: 30px; top: 23.6923%; left: 18.75%; border: 1px solid} .p-veneer .btn{ position: absolute; top: 77.3846%; width: 14.5%; left: 28.22916%} .m-veneer-best .content{ display: flex; gap: 57px; margin-bottom: 35px} .m-veneer-best .content .img{ width: 445px} .l-veneer_item{ position: relative; border: 1px solid #025899; border-radius: 30px; padding: 14px 30px 14px 45px} .l-veneer_item .order{ position: absolute; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #025899; border-radius: 50%; left: -25px; top: 50%; transform: translateY(-50%)} .whats-tragop .inner{ display: flex; gap: 34px} .whats-tragop .img{ width: 504px} .tragop-bef_item{ display: flex; align-items: center; gap: 36px; margin-bottom: 20px} .tragop-bef .order{ width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #025899; font-size: 34px; color: #fff; font-weight: 700} .p-tragop .customer-regis{ margin: 20px 0} .p-tragop .customer-regis figcaption{ color: #025899; margin-top: 10px; text-align: center} .l-banks{ margin: 0 -10px} .l-banks li{ width: 20%; padding: 0 10px; margin-bottom: 10px} .l-spec{ display: flex; flex-wrap: wrap; margin: 0 -11px} .l-spec_item{ width: 25%; padding: 0 11px; margin-bottom: 20px} .l-spec_item .ord{ position: absolute; font-weight: 700; font-size: 50px; color: #025899; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); border-radius: 0 31px 0 10px; left: 0; bottom: 0; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; z-index: 1} .l-spec_item .info{ position: absolute; bottom: 0; left: 0; background: #025899; border-radius: 10px; padding-left: 62px; width: 100%} .l-spec_item .info p{ font-size: 16px; line-height: 24px; color: #fff; text-align: center; padding: 7px} @media screen and (max-width: 767px){ .hocvan, .hocvan .l-doctors .certificate, .l-type .box-img, .m-intro .explant .img, .m-tech_info .content img, .m-tech_info .content_block, .p-bracer .m-contact, .p-dieutri .m-contact{ margin-bottom: 20px} .block-diff .inner, .box-khuyencao, .hinhdanh .wrap, .hocvan .gr-images, .l-implants_type, .l-implants_type:nth-child(2n), .m-intro .explant, .whats-tragop .inner, .wrap-diff{ flex-direction: column} .block-diff .inner .l-tech, .box-khuyencao .img, .box-khuyencao .info, .gr-img.gr02 .big-img, .gr-img.gr03 .big-img, .hocvan .gr-images .big-img, .hocvan .gr-images .small-img, .implant-points_block, .l-3points_item .info, .l-demo_item .demo-img .img-big img, .l-demo_item .demo-img .img-small img, .l-implants_type .info, .l-risk_item, .m-problem .right, .m-tech_info .img, .m-veneer-best .content .img, .m-worry_content .img, .m-worry_content .l-worry, .p-doctung .m-paper_item, .p-promotion .mv img, .p-tooth-ceramic .mv .btn img, .whats-tragop .img{ width: 100%} .hocvan .l-doctors .swiper-prev{ left: 6px} .hocvan .l-doctors .swiper-next{ right: 6px} .hocvan .l-doctors_info, .l-faq .answer, .p-service .l-doctors_info{ padding-left: 0} .hocvan .l-doctors_info .l-cer-img{ padding: 0 14px; width: auto} .video .fig-title{ font-weight: 400; font-size: 16px; line-height: 24px} .m-doc-demo{ background: #f7f7f7; padding: 20px 0; margin-bottom: 30px} .l-demo_item{ width: 100%; margin-bottom: 15px} .l-demo_item .wrap{ padding: 7px 7px 20px} .l-demo_item .demo-img{ flex-wrap: wrap; margin-bottom: 20px} .l-demo_item .demo-img .img-big{ width: 100%; border-radius: 10px; margin-bottom: 4px} .l-demo_item .demo-img .img-small{ width: auto; flex-direction: row; margin: 0 -3px} .l-demo_item .demo-img .img-small .img{ width: 50%; padding: 0 3px; border-radius: 10px} .l-demo_item .demo-img .img-small .img::before{ width: 59px; font-size: 16px; line-height: 24px; padding: 1px 0; left: 3px; text-align: center; border-top-right-radius: 10px; border-bottom-left-radius: 10px} .l-demo_item .demo-info .implant, .l-demo_item .demo-info .type, .l-uudai_item .body .price.text{ font-size: 16px; line-height: 24px} .l-demo_item .demo-info_name{ margin-bottom: 10px} .l-demo_item .demo-info_name .name, .m-promo.is-ceramic .l-uudai_item .heading strong{ font-size: 18px; line-height: 27px} .l-3points_item, .m-problem_inner, .m-review, .m-tech_info{ flex-direction: column; gap: 20px} .m-goods_block .img, .m-review_img{ width: 100%; order: 1} .m-review_info{ width: 100%; order: 2 !important; padding: 0 !important} .m-review_info .head{ flex-direction: column; align-items: flex-start; padding: 6px; position: relative} .m-review_info .head .lca{ position: absolute; right: 0; top: 0} .m-review_info .head .img{ border-radius: 20px; overflow: hidden} .m-review_info .head .name{ width: 100%; position: relative; margin-top: 10px} .m-review_info .head .name .nm{ justify-content: space-between} .l-clip{ margin-left: 0; margin-right: 0; gap: 20px} .l-benefit_item, .l-clip li{ width: 100%; padding: 0} .p-doctung .l-paper{ margin: 0; flex-direction: column} .p-all-in .mv .btn, .p-all-in .mv .text, .p-all-in .mv .ttl, .p-basis .mv .btn, .p-basis .mv .ttl, .p-basis .mv .ttx, .p-basis .mv strong, .p-bracer .mv .btn, .p-bracer .mv .ttl, .p-bracer .mv .txt{ left: 50%; transform: translateX(-50%)} .p-basis .mv .ttx{ font-size: 6.2vw; top: 6.0769%} .p-basis .mv strong{ height: auto; width: auto; padding: 5px; top: 14%} .p-basis .mv strong img{ width: 74.10777%} .p-basis .mv .ttl{ width: 77.1771%; top: 27%} .p-all-in .mv .btn, .p-basis .mv .btn{ top: 40.5385%; width: 44%} .gr-img.gr02, .gr-img.gr03{ flex-direction: column; gap: 4px} .p-service .l-doctors .swiper-next{ right: 10px} .p-service .l-doctors .swiper-prev{ left: 10px} .p-service .l-doctors_info .l-cer-img{ width: auto} .l-benefit, .l-bra-price_item.is-full .price, .p-service .l-demo{ margin: 0} .p-service .l-prize{ gap: 20px 0; justify-content: center} .p-service .mv .ttl{ font-size: 6.08vw; top: 4.38461%; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap} .p-service .mv .ttl span{ display: block; background: linear-gradient(270deg, #ff1f1f 0, rgba(255, 105, 105, 0.932292) 50%, #ff1f1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-weight: 700; font-size: 8vw} .box-uudai .l-outstand li a::after, .box-uudai .l-outstand li a::before, .box-uudai .l-outstand li::before, .m-worry_content::before, .p-all-in .mv .txt, .p-service .mv .txt{ display: none} .p-service .mv .btn{ top: 40.5385%; left: 50%; transform: translateX(-50%); width: 44%} .m-problem .left{ padding-right: 0} .l-check li{ background-position: left 4px top 3px} .l-giaiphap{ flex-wrap: wrap; gap: 20px 0; margin: 0 -10px 30px} .l-giaiphap li{ width: 50%; padding: 0 10px} .l-giaiphap li p, .l-implants_type .info .ex-point, .m-intro .explant .m-btn{ text-align: center} .l-flow_item{ border-radius: 0; padding: 20px 7px; flex-direction: column; border: none; margin: 0 -10px 20px} .l-flow_item .info{ width: 100%; padding: 0; margin-bottom: 0} .l-flow_item .info .text, .m-promo .l-outstand{ margin-bottom: 0} .l-flow_item .info .ttl-secondary{ display: flex; align-items: center; gap: 30px; margin-bottom: 20px} .l-flow_item .info .ttl-secondary img{ width: 128px} .box-text, .l-flow_item .img, .l-tooths.is-bracer{ margin-top: 20px} .m-price .doc-intro{ background: #fff; padding: 0} .box-uudai{ padding-bottom: 20px} .box-uudai .l-outstand li::after{ left: 8px; top: 18px; background: #fff} .box-uudai .l-outstand li a{ padding-left: 20px; background: 0 0; color: #fff} .l-uudai.is-reverse .heading, .l-uudai_item .heading strong{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%)} .l-uudai{ margin: 0 -2px 20px} .l-uudai_item{ padding: 0 2px} .l-uudai_item .heading{ background: #025899; color: #fff; font-size: 14px; line-height: 24px; padding: 7px 2px 1px} .l-uudai_item .heading strong{ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-size: 18px; line-height: 27px} .l-uudai_item .body{ padding-top: 15px} .l-uudai_item .body .img{ width: 100%; text-align: center} .l-uudai_item .body .img .ico{ width: 46px; height: 46px; right: 11px} .l-uudai_item .body .img_inner{ width: 116px; height: 116px; margin: 0 auto} .l-uudai_item .body .price{ font-size: 18px} .l-uudai_item .body .price.current-price{ font-size: 24px} .l-uudai_item .body .price.new-price{ font-size: 20px} .l-uudai_item .body .price.new-price small{ font-size: 16px} .l-uudai_item .body .m-btn{ margin-top: 10px} .l-uudai_item .body .m-btn a{ font-size: 16px; padding: 0 16px} .l-uudai.is-reverse .heading{ color: #2b2b2b} .l-uudai.is-reverse .heading strong{ color: #025899; -webkit-text-fill-color: #025899} .l-faq, .l-type, .m-phacdo_inner{ margin: 0 -10px} .l-faq_item{ position: relative; padding-left: 10px; padding-right: 10px; padding-bottom: 70px} .l-faq_item .m-btn{ position: absolute; bottom: 20px; right: 18px} .l-faq_item .m-btn a{ font-weight: 400} .p-all-in .mv .ttl{ font-size: 9.08vw; top: 11.38461%; white-space: nowrap} .p-all-in .mv .text{ white-space: nowrap; font-size: 7vw; top: 6%} .m-worry{ background: linear-gradient(90deg, #e4f4ff 0, rgba(255, 255, 255, 0.5) 104.5%)} .m-worry .doc-intro{ background: 0 0; padding: 0} .m-worry_content{ flex-direction: column-reverse; border: none; padding: 0} .m-worry_content img.is-sp{ margin: auto} .m-tech_info .content{ width: 100%; padding-left: 0} .m-goods_block{ flex-direction: column-reverse; gap: 20px} .l-3points_item .img, .l-type .l-check, .m-goods_block .l-goods{ width: 100%; order: 2} .l-goods .ttl-secondary::before{ left: 4px; top: 9px} .l-risk .ttl{ padding-top: 3px; padding-bottom: 3px} .m-veneer-best, .m-why{ background: #f7f7f7} .l-3points{ gap: 40px} .l-3points_item .info .point{ font-size: 18px; width: 28px; height: 28px; margin-right: 13px} .l-steps_block .img{ margin-bottom: 30px !important} .p-promotion .mv .btn{ width: 35%; left: 50%; top: 41.6923%; transform: translateX(-50%)} .about-doctors .wrapper, .l-issues.is-3-col, .p-promotion .m-contact, .p-promotion .slick-slider{ padding: 0} .p-promotion .wrap-doctor{ background: url(../images/promotion/sp/bg_doc.png) left top/cover no-repeat} .p-promotion .m-contact .modal-contact .inner{ max-width: 100%; border-radius: 20px; padding: 25px 20px} .p-promotion .m-contact .modal-contact .inner strong{ font-size: 18px; line-height: 27px; color: #fff; -webkit-text-fill-color: #fff} .p-promotion .m-contact .modal-contact .inner .title{ font-size: 22px; line-height: 33px; background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; margin-bottom: 10px} .m-aboutident{ padding-top: 23px} .m-aboutident::before{ background: url(../images/promotion/sp/bg_yellow.svg) top center/100% auto no-repeat; top: -5px} .m-aboutident::after{ background: url(../images/promotion/sp/bg_blue.svg) top center/cover no-repeat} .m-aboutident .ttl-primary span{ font-size: 22px; line-height: 33px} .m-aboutident .m-about{ flex-direction: column; padding-left: 12px; padding-right: 17px; gap: 40px} .m-aboutident .m-about li{ position: relative; padding-left: 70px} .m-aboutident .m-about li img{ position: absolute; left: 0; top: 50%; transform: translateY(-50%)} .m-aboutident .m-about li .text{ background: linear-gradient(90deg, #dfaa23 0, #fbf08d 47.92%, #dfaa23 100%); border-radius: 0 30px 30px 0; margin-bottom: 0; color: #025899; text-align: center; padding-top: 9px; padding-bottom: 9px} .bracer-type, .m-promo{ padding-bottom: 0} .m-promo.is-ceramic .l-uudai{ justify-content: center; gap: 20px 0; margin: 0 -2px 20px} .m-promo.is-ceramic .l-uudai_item{ max-width: 50%; padding: 0 2px} .m-loairang .intro-text{ padding: 10px; background: #e4f4ff} .block-diff .block-child, .block-diff .inner.rev, .p-dieutri .m-reward_inner{ flex-direction: column-reverse} .p-dieutri .m-reward .info{ display: block} .p-dieutri .l-reward{ color: #025899} .tooth-block{ padding: 0 10px} .tooth-block .doc-intro{ padding: 10px; margin: 0 -10px 20px} .l-tooths_item{ padding-bottom: 0; border: none} .l-tooths_item .content .info{ width: 100%; flex-direction: column; gap: 10px} .l-tooths_item .content .info_block{ width: 100%; margin-bottom: 10px} .l-type_item{ border-radius: 10px} .l-type .inner{ background-position: top center !important; flex-direction: column; align-items: center; padding-top: 117vw; padding-left: 10px; padding-right: 10px} .box-khuyencao .m-btn{ text-align: center; margin-top: 30px} .m-intro .img{ margin: 0 auto} .l-issues{ margin: 0 -2px; gap: 10px 0} .l-issues.is-3-col .l-issues_item, .l-issues_item{ width: 50%; padding: 0 2px} .l-issues_item .inner{ padding: 22px 10px 24px} .l-demo.is-one .l-demo_item{ width: 100%; margin-bottom: 20px} .p-tooth-ceramic .mv .name, .p-tooth-ceramic .mv .title{ white-space: nowrap; left: 50%; transform: translateX(-50%)} .p-tooth-ceramic .mv .title{ font-size: 6.08vw; top: 2.38461%} .p-tooth-ceramic .mv .name{ font-size: 7vw; top: 9%} .p-tooth-ceramic .mv .btn{ top: 43.5385%; left: 50%; transform: translateX(-50%); width: 44%} .implant-points{ flex-wrap: wrap} .implant-points_block .img{ width: 188px} .implant-points.is-bg{ background: 0 0; padding-top: 0; padding-bottom: 0} .l-implants_type .info .ttl-secondary{ text-align: center; font-size: 18px; line-height: 27px} .l-implants_type .info .ex-point + .manufacturer{ display: flex} .l-implants_type .info .ex-point + .manufacturer span{ flex-shrink: 0} .l-implants_type .img{ width: 200px; margin: 0 auto 30px} .block-dacdiem .inner{ background-position: top center !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 40vw} .block-dacdiem_item.dd01 .inner{ padding-top: 255px; background-size: 330px} .block-dacdiem_item.dd02 .inner{ padding-top: 385px; background-size: 380px; background-position: top right -10px !important} .block-diff .block-child .info{ max-width: 100% !important} .block-diff .block-child.first .img{ width: 90%; margin: 0 auto} .block-diff .block-child.second{ margin-top: 0; flex-direction: column-reverse} .block-diff .block-child.second .img{ position: relative; top: auto; left: auto} .block-diff .inner .l-tech li{ padding-left: 80px} .block-diff .inner .l-tech li::before{ display: none !important} .block-diff .inner .l-tech li span{ border-radius: 10px; width: 64px} .block-diff .inner .l-tech li:nth-child(2){ margin-left: 0} .block-diff .inner .l-tech .content{ max-width: 100%} .block-diff .inner .l-tech .content .ttl-bl{ background: #fff; color: #025899; margin: 0; padding: 0} .block-diff .inner .img{ width: 70%} .block-diff .ttl-bl{ margin: 0 -10px 20px; background: #025899; color: #fff; padding: 8px 24px} .wrap-diff .img{ width: 80%; margin: -20px auto 20px} .p-bracer .mv .ttl{ font-size: 5.08vw; top: 5%; white-space: nowrap} .p-bracer .mv .txt{ padding: 5px 16px; font-size: 4.56vw; top: 10.1538%; border-radius: 30px; white-space: nowrap} .p-bracer .mv .btn{ top: 46.5385%; width: 44%} .l-benefit_item .title{ border-radius: 30px 20px 20px 30px} .l-benefit_item .title .ttl{ font-size: 18px; line-height: 27px; margin-left: 10px} .bracer-situation{ background-position: top left} .l-tooths.is-bracer .l-tooths_item{ flex-direction: column !important} .l-tooths.is-bracer .l-tooths_item .img{ width: 100%; padding: 10px} .l-tooths.is-bracer .l-tooths_item .content .ttl-background{ font-size: 18px; line-height: 27px; border-radius: 0} .l-tooths.is-bracer .l-tooths_item .content .info_block{ padding: 10px; border-radius: 0} .l-tooths.is-bracer .l-tooths_item .content .info .l-dots{ padding-left: 10px} .m-bracer-price .l-bra-price{ margin-top: 30px} .l-bra-price{ gap: 4px} .l-bra-price_item{ width: calc(50% - 4px); padding: 12px 15px; border-radius: 20px} .l-bra-price_item.is-full{ width: 100%; gap: 3px; display: flex; align-items: center} .l-bra-price_item.is-full .img{ width: 150px; height: 150px; margin: 0} .l-bra-price_item.is-full .outer{ flex: 1} .l-bra-price_item .img{ width: 100%; height: 38.21vw; margin-bottom: 8px} .l-bra-price_item .img::before{ bottom: -3px} .l-bra-price_item .price{ min-height: auto; margin: 0 -20px} .l-bra-price_item .price span{ font-size: 20px; line-height: 30px} .l-bra-price_item .m-btn a{ width: 100%; padding-left: 0; padding-right: 0} .l-doctors.is-single .doc-intro{ margin: 0 -10px; padding: 10px; border-radius: 0} .l-doctors.is-single .l-doctors_info{ padding: 10px} .p-veneer .m-intro .explant .ttl-primary{ text-align: center !important} .p-veneer .box-text{ margin-top: 0} .p-veneer .mv .title{ font-size: 5.08vw; padding: 5px 5%; top: 7.6923%; left: 50%; transform: translateX(-50%); white-space: nowrap} .p-veneer .mv .btn{ top: 46.5385%; left: 50%; transform: translateX(-50%); width: 44%} .m-veneer-best .content{ flex-direction: column; margin-bottom: 10px} .l-veneer{ padding-left: 20px} .l-veneer_item{ background: #fff; padding: 10px 18px 10px 28px; border-radius: 20px} .l-veneer_item .order{ font-size: 20px; width: 36px; height: 36px; left: -18px} .tragop-bef_item{ position: relative; margin-bottom: 32px} .tragop-bef .order{ position: absolute; font-size: 34px; width: 47px; height: 46px; top: -11px; left: 0} .tragop-bef .info .ttl-bl{ padding-left: 60px; margin-bottom: 23px} .tragop-credit{ padding-bottom: 10px} .p-tragop .doc-intro{ margin: 20px -10px 30px} .p-tragop .customer-regis{ background: #f7f7f7; margin: 0 -10px; padding-bottom: 20px} .p-tragop .customer-regis figcaption{ font-size: 15px; line-height: 22px} .p-tragop .m-contact{ margin-bottom: 30px} .l-banks, .l-spec{ margin: 0 -4px} .l-banks li{ width: 33.3333%; padding: 0 4px; margin-bottom: 8px} .l-spec_item{ width: 50%; padding: 0 4px; margin-bottom: 7px} .l-spec_item .ord{ border-radius: 10px 0 20px; width: 40px; height: 40px; font-size: 30px; top: 0; bottom: auto} .l-spec_item .info{ padding-left: 0; position: relative; margin-top: -30px; display: flex; align-items: center; justify-content: center; min-height: 84px}} @media screen and (max-width: 1300.98px){ .m-customer_item{ padding: 10px}} @media screen and (max-width: 1199.98px){ .l-video> li{ flex-direction: column; gap: 10px 0} .l-video> li .video-info{ display: none} .l-video> li .vidplay{ width: 100%} .m-problem .left{ padding-right: 30px} .m-review.is-reverse .m-review_info{ overflow: hidden} .m-review_info .body{ overflow: hidden auto} .box-uudai.is-ceramic .l-uudai{ justify-content: center; gap: 50px 0 !important} .m-customer_item .info .cus-name{ font-size: 19px} .m-customer_inner{ min-height: 588px} .p-doctung .m-paper_wrap{ max-height: 520px} .m-paper_inner{ padding: 10px} .m-paper_wrap img{ height: 500px; width: 100%; object-fit: cover}} .thanks-page .call_button, .thanks-page h1{ color: #025899; font-size: 22px; font-weight: 700; line-height: 33px; font-style: normal} @media screen and (min-width: 991.98px){ .m-doctors .l-doctors .doc-img .img{ width: 67%}} @media screen and (max-width: 991.98px) and (min-width: 768px){ .m-doctors .l-doctors .doc-img{ display: none} .m-doctors .l-doctors .doc-info{ padding-bottom: 20px} .m-reward_inner{ flex-direction: column; gap: 5rem 0} .m-reward_inner .img{ justify-content: center} .m-review_img img{ object-fit: cover} .m-problem_inner{ flex-direction: column; gap: 3rem 0} .m-problem .left{ padding-right: 0} .l-demo_item .demo-info_name .name{ font-size: 18px; margin-bottom: 15px} .l-demo_item .demo-info .implant, .l-demo_item .demo-info .type{ font-size: 15px; padding-left: 35px} .l-demo_item .wrap{ min-height: 437px} .l-doctors_images{ width: auto} .whats-tragop .inner{ flex-direction: column} .whats-tragop .img{ margin-left: auto; margin-right: auto} .m-customer_item .info .cus-name{ font-size: 18px} .m-customer_item .info .from{ font-size: 15px; margin-bottom: 10px} .m-customer_item .info{ margin-top: 20px} .m-customer_inner{ min-height: 590px} .m-customer_item{ padding: 10px} .m-problem .right{ margin-right: auto; margin-left: auto} .m-paper_wrap img{ height: 430px}} @media screen and (max-width: 767.98px){ .m-commit_block.m-commit_block--is-reverse{ flex-direction: column-reverse} .m-commit_block{ flex-direction: column; gap: 3rem 0} .m-customer_inner{ min-height: unset} .m-paper_wrap img{ height: 100%} .p-doctung .m-paper_wrap{ max-height: 430px} .braces-process .column-header.blue{ border-top-right-radius: 15px} .braces-process .column:last-child{ border-top-left-radius: 15px}} .p-doctung .m-paper_wrap{ min-height: 300px} .slide-hide{ height: 0; overflow: hidden; visibility: hidden} section{ content-visibility: auto} .v1-map-iframe{ border: 0} .v1-icon-offset{ left: 9px; position: relative; top: 7px} .v1-mt-15{ margin-top: 15px} .v1-centered-image-wide{ margin: auto; max-width: 1000px} .v1-centered-image-medium{ margin: auto; max-width: 650px} .m-contact.v1-contact-has-bg{ isolation: isolate; overflow: hidden; position: relative} .v1-contact-bg-img{ inset: 0; height: 100%; object-fit: cover; pointer-events: none; position: absolute; width: 100%; z-index: -1} .v1-content-padding{ padding: 2rem} .thanks-page{ margin: 120px auto; text-align: center} .thanks-page h1{ margin: 15px 0} .thanks-page p{ font-size: 18px; font-style: normal; font-weight: 400; line-height: 27px; margin-bottom: 10px} .thanks-page .call_button{ display: flex; gap: 10px; justify-content: center; margin: 15px} .v1-404-title{ color: #b0686b; font-size: 32px; line-height: 60px; padding-bottom: 100px; text-align: center} .v1-404-home{ color: #055998} .l-type_item.v1-type-offset{ margin-top: 25px} .v1-veneer-heading{ color: #025899; font-size: 25px} .v1-veneer-name{ color: #025899; font-size: 22px} .block-chuyen-mon{ background: #025899; color: #fff; font-size: 18px; line-height: 27px; margin-bottom: 30px; padding: 10px 36px} .block-chuyen-mon li{ padding-left: 15px; position: relative} .block-chuyen-mon li::before{ background: #fff; border-radius: 50%; content: ""; height: 5px; left: 0; position: absolute; top: 11px; width: 5px} .khach-hang-review .head{ background: #025899; border-radius: 20px 20px 0 0; padding: 15px 30px} .khach-hang-review .head .title{ color: #fff; display: inline; font-size: 22px; font-weight: 700; line-height: 33px} .khach-hang-review .head .location{ float: right; font-size: 18px; font-style: normal; font-weight: 400; line-height: 27px} .khach-hang-review .head .sub_title{ color: #fff; font-size: 18px; font-style: normal; font-weight: 700; line-height: 27px; margin-top: 5px} .khach-hang-review .body{ background: #e4f4ff; border-radius: 0 0 20px 20px; padding: 10px 20px} .khach-hang-review quote{ display: block; padding: 0 45px; position: relative} .khach-hang-review quote::after, .khach-hang-review quote::before{ background-repeat: no-repeat; background-size: 100%; content: ""; height: 20px; position: absolute; width: 29px} .khach-hang-review quote::before{ background-image: url(/wp-content/themes/i-dent/assets/images/ico_quote_small.svg); left: 0; top: 0} .khach-hang-review quote::after{ background-image: url(/wp-content/themes/i-dent/assets/images/ico_quote_small_rev.svg); bottom: 0; right: 0} .m-benefits{ background-color: #fff; padding: 5rem 0} .m-benefits-flex{ align-items: center; display: flex; gap: 2rem; justify-content: space-around; width: 100%} .m-benefits .benefits-list{ display: flex; flex-direction: column; gap: 25px; list-style: none; width: 55%} .m-benefits .benefits-list li{ display: flex; gap: 2rem; justify-content: flex-start} .m-benefits .benefits-list li .benefit-text{ background-color: #025899; border-radius: 10px; color: #fff; display: flex; gap: 2rem; justify-content: space-between; padding: 10px 15px; width: 90%} .m-benefits .benefits-list i{ flex-shrink: 0; height: 40px; width: 40px} .m-benefits .benefit-text span:first-child{ background-color: #025899; font-size: 1.6rem; font-weight: 600} .m-benefits .benefit-text span:nth-child(2){ align-items: center; background-color: #e74c3c; border-radius: 10px; display: flex; font-size: 1.6rem; font-weight: 700; justify-content: center; margin: -10px -15px; width: 50%} .m-benefits .benefits-image img{ height: auto; max-width: 100%} .reasons-ident{ background: #f8f8f8; border-radius: 18px; margin: 40px 0; padding: 60px 0 40px} .reasons-ident .wrapper{ margin: 0 auto; max-width: 1100px} .reasons-ident .ttl-primary{ margin-bottom: 32px} .reasons-grid{ display: flex; flex-wrap: wrap; gap: 0 40px; justify-content: center} .reasons-list{ list-style: none; margin: 0; padding: 0} .reasons-item{ align-items: center; display: flex; margin-bottom: 32px} .reasons-img{ background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(26, 76, 139, 0.08); display: inline-block; height: 160px; margin-right: 24px; overflow: hidden; width: 160px} .reasons-img img{ border-radius: 50%; display: block; height: 100%; object-fit: cover; width: 100%} .reasons-text{ color: #222; font-size: 1.8rem; line-height: 1.7} @media (max-width: 991px){ .reasons-grid{ flex-direction: column; gap: 40px 0} .reasons-list{ margin-bottom: 24px}} @media (max-width: 768px){ .m-benefits-flex{ flex-direction: column-reverse} .m-benefits .benefits-list{ width: 100%} .m-benefits .benefits-list li{ gap: 1rem} .m-benefits .benefit-text span:first-child, .m-benefits .benefit-text span:nth-child(2){ font-size: 1.3rem} .m-benefits .benefits-image img{ display: block; margin: 0 auto; max-width: 80%}} @media (max-width: 600px){ .reasons-ident .ttl-primary{ font-size: 20px}} .m-phacdo{ max-width: 90rem; width: 100%; padding: 0 1.6rem; text-align: center; margin-top: 1.6rem} .m-phacdo .m-article{ text-align: left; padding: 0} .m-detail .m-detail_detail{ max-width: 83.2rem; padding: 0 1.6rem} .m-detail .article-title{ color: #025899; font-weight: 700}