/* Theme Name: ThemeWpGiaRe Description: Theme by ThemeWpGiaRe Author: Trường Phong Template: flatsome Version: 3.0 */ /*************** ADD CUSTOM CSS HERE. ***************/ @media (max-width: 767px) { .device-collection { margin: 0 !important; } .device-collection .desktop { margin: 0 !important; } .device-collection .desktop { position: unset !important; } .device-collection:after { padding-top: unset !important; } } :root { --font-size: .8em; --bg1: #f5f8f7; --blue: #3498db; --green: #2ecc71; --purple: #9b59b6; --gold: #f1c40f; --red: #e74c3c; --orange: #e67e22; --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f; --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022 } .section-themes1 { padding-top: 50px !important; background: linear-gradient(to bottom, #0360e714 0%, #fff 100%); } .absolute-footer.dark { display: none; } .footer-title p { color: #d1d3d6; font-size: 18px; margin-top: 0; margin-bottom: 10px; line-height: 21px; font-weight: 600; } .desc-ff p, footer ul li { list-style: none; margin: 0 !important; color: #fff; line-height: 31px; font-size: 14px; font-weight: 500; } .mg0 * { margin: 0px; } .themes-head { background-image: url("data:image/svg+xml,%3Csvg width='404' height='154' viewBox='0 0 404 154' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='211.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='211.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='211.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='211.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='211.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='211.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='211.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='211.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='232.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='253.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='274.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='295.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='316.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='337.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='358.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='379.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='400.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='3.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='24.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='45.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='66.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='87.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='108.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='129.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='150.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='171.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='3.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='24.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='45.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='66.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='87.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='108.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='129.5' r='3.5' fill='%23F4F4F4'/%3E%3Ccircle cx='192.5' cy='150.5' r='3.5' fill='%23F4F4F4'/%3E%3C/svg%3E%0A"); background-position: bottom left; background-repeat: no-repeat } .themes-head h1 { font-size: 25px; line-height: .8; margin-bottom: 20px } .list-feature li { list-style: none; margin-left: 0 !important; padding-left: 25px; margin-bottom: 5px; background-image: url("data:image/svg+xml,%3Csvg id='Icon' height='100' viewBox='0 0 64 64' width='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='32' fill='%230160e7' r='29'/%3E%3Cpath d='m46.414 24.958-8.1-8.1a2 2 0 0 0 -2.829 2.828l4.69 4.69h-13.175a8.009 8.009 0 0 0 -8 8v13.36a2 2 0 0 0 4 0v-13.364a4 4 0 0 1 4-4h13.172l-4.7 4.7a2 2 0 1 0 2.828 2.828l8.111-8.111a2 2 0 0 0 .003-2.831z' fill='%23fff'/%3E%3C/svg%3E"); background-size: 20px; background-position: left top; background-repeat: no-repeat; font-weight: 500 } a.button.btn-more { padding: 10px 30px; } a.button.btn-more:before { position: absolute; content: ''; background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' enable-background='new 0 0 48 48' height='512' viewBox='0 0 48 48' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='XMLID_952_' d='m1.245 11.266c1.468-1.962 2.99-3.18 3.09-3.275 3.982-3.439 9.875-5.345 16.18-4.208 3.009.731 3.371 1.04 5.105 1.842l.013.016c1 .44 5.018 3.073 7.152 7.144 4.096 8.033 1.144 13.497-.984 18.346l-3.401-4.181c-.616-.757-1.839-.234-1.717.734l2.461 19.464c.092.729.928 1.095 1.526.669l16.11-11.464c.785-.558.365-1.796-.598-1.762l-6.003.214c.288-1 7.184-12.752-2.056-25.521-2.983-4.052-6.403-6.161-10.756-7.991-1.781-.588-4.29-1.189-6.393-1.276-7.415-.265-13.591 2.754-17.441 7.153-.81 1-1.453 1.592-2.691 3.836-.142.259.225.498.403.26z' fill='%230160e7'/%3E%3C/svg%3E"); width: 50px; height: 50px; background-size: 100%; right: -70px } .phongvt-why:before { content: ''; position: absolute; width: 600px; height: 600px; background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1358 1089' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='figure_moving' x1='0%25' x2='86.603%25' y1='50%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgb(252,253,253)' stop-opacity='1'%3E%3C/stop%3E%3Cstop offset='99%25' stop-color='rgb(248,250,251)' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1357.57 464.94C1357.57 605.537 1180.32 1063.16 848.987 1088.34C505.565 1088.34 591.877 719.737 426.004 719.737C311.195 719.737 0 831.507 0 525.037C0 218.566 368.288 0.336304 674.758 0.336304C981.229 0.336304 1357.57 158.47 1357.57 464.94Z' fill='url(%23figure_moving)'%3E%3C/path%3E%3C/svg%3E"); background-size: 100%; background-repeat: no-repeat; z-index: 0 } .phongvt-why:after { content: ''; position: absolute; width: 200px; height: 200px; background-size: 100%; background-repeat: no-repeat; background: url(/wp-content/uploads/2024/10/round-points.png) no-repeat; background-size: contain; bottom: 0; right: 0; z-index: 0 } .row-why>.col>.col-inner { z-index: 1; position: relative; padding: 30px; border-style: solid; border-width: 0; border-radius: 10px; box-shadow: 12px 19px 62px 0px rgba(13, 52, 79, .07); \ transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, transform var(--e-transform-transition-duration, .4s); } .row-why>.col:hover .col-inner { background-color: #0160e7; border-style: solid; border-width: 0; box-shadow: 14px 24px 43px 0px rgba(33, 41, 48, .42) } .row-why>.col>.col-inner:after { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: width .4s, height .4s; animation: width .4s, height .4s; position: absolute; transition: width .4s, height .4s; left: 50%; top: 50%; background: inherit; box-shadow: inherit; border-radius: inherit; width: 100%; height: 100%; content: ""; z-index: -1; will-change: width, height } .row-why>.col:hover .col-inner:after { width: 103%; height: 103% } .row-why>.col .icon-box-text { font-weight: 600; font-size: 14px } .row-why>.col:hover .col-inner * { color: #fff } .section-why:after { content: ''; position: absolute; width: 200px; height: 200px; background-size: 100%; background-repeat: no-repeat; background: url('/wp-content/uploads/2024/09/round-points.png') no-repeat; background-size: contain; bottom: 0; right: 0; z-index: 0 } ul.infoGraphic { font-size: var(--font-size); display: flex; flex-wrap: wrap; justify-content: center } ul.infoGraphic li { position: relative; width: 100%; max-width: 40em; background: var(--bg1); border-radius: .5em; padding: .5em; z-index: 1; transition: all .2s; cursor: pointer; list-style: none } ul.infoGraphic li .numberWrap { position: absolute } ul.infoGraphic li .number { font-size: 13em; font-weight: 900; text-align: center } ul.infoGraphic li .number.fontColor1 { color: var(--blue) } ul.infoGraphic li .number.fontColor2 { color: var(--green) } ul.infoGraphic li .number.fontColor3 { color: var(--purple) } ul.infoGraphic li .number.fontColor4 { color: var(--gold) } ul.infoGraphic li .number.fontColor5 { color: var(--red) } ul.infoGraphic li .number.fontColor6 { color: var(--orange) } ul.infoGraphic li .coverWrap { transform: rotate(130deg); position: absolute; width: 18em; height: 15em; left: -3em; top: -1em } ul.infoGraphic li .coverWrap .numberCover { position: absolute; background: var(--bg1); width: 18em; height: 6em; border-radius: 50% 50% 0 0; border-bottom: 3px solid #f5f8f7; transition: all .4s } ul.infoGraphic li .coverWrap .numberCover:before { position: absolute; content: ""; bottom: 5px; left: 4em; right: 4em; top: 5em; box-shadow: 0 0 30px 17px #48668577; border-radius: 100px/10px; z-index: -1 } ul.infoGraphic li .coverWrap .numberCover:after { position: absolute; bottom: 0; content: ""; left: -10%; width: 120%; height: 150%; background: radial-gradient(at bottom, #48668533, transparent, transparent); z-index: 1 } ul.infoGraphic li .content { margin: 8em 3em 1em 7em; position: relative } ul.infoGraphic li .content h3 { font-size: 1.7em; font-weight: 700; text-align: center; margin-bottom: 10px; text-transform: uppercase } ul.infoGraphic li .content p { line-height: 1.5em; font-size: 14px } ul.infoGraphic li:hover .coverWrap .numberCover { border-radius: 100% } .section-tieuchi { padding-top: 120px } .menu-toolbar { background: #fff; border-bottom: 1px solid #dd1e26; box-shadow: 0 0 22px rgba(0, 60, 37, .1); position: relative; z-index: 99; padding: 12px 0; } @keyframes loop_trans { 50% { transform: translateY(15px) } } .padding-bot>.col, .padding-bot { padding-bottom: 0; } .menu-toolbar .menu-item svg { width: 30px; height: 30px } .menu-toolbar .menu-item svg path { fill: var(--primary-color) } .menu-toolbar .nav>li { margin: 0 15px } .menu-toolbar .menu-item a span { padding-top: 4px } .menu-toolbar .menu-item a { font-size: 14px; font-weight: 700; color: #04410d; gap: 3px; align-items: center; } .menu-toolbar { background: #fff; border-bottom: 1px solid #dd1e26; box-shadow: 0 0 22px rgba(0, 60, 37, .1); position: relative; z-index: 99; padding: 12px 0 } .menu-toolbar .menu-item:hover>a { color: var(--primary-color) } .menu-toolbar .filter-form form { position: relative; margin-bottom: 0 } .menu-toolbar .menu-item ul { z-index: 9999 } .menu-toolbar .filter-form form input { border: 0; border-radius: 90px; height: 52px; line-height: 52px; width: 435px; padding: 0 180px 0 25px; outline: 0; font-size: 14px; font-weight: 400; background: #f6f6f6; color: #333; font-weight: 500; margin-bottom: 0 } .menu-toolbar .filter-form form input::placeholder { color: var(--primary-color) } .menu-toolbar .filter-form form input:-ms-input-placeholder { color: var(--primary-color) } .menu-toolbar .filter-form form input::-ms-input-placeholder { color: var(--primary-color) } .menu-toolbar .filter-form form button { position: absolute; border: 0; background: var(--primary-color); right: -7px; top: 7px; font-size: 16px; font-weight: 700; width: 156px; height: 38px; line-height: 36px; cursor: pointer; outline: 0; border-radius: 90px; color: #fff; -webkit-user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; white-space: nowrap; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; text-transform: initial } .menu-toolbar .filter-form form button:before { content: ""; border-radius: 45px; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .04); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; transition: all .5s ease-out } .menu-toolbar .filter-form form button:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1) } .menu-toolbar .filter-form form button i { color: #fff; font-weight: 300 } .product-small.box .box-text { padding: 20px; } .product-small.box { border-radius: 8px; background-color: #fff; border: 1px solid #eee; transition: all 0.5s; margin-bottom: 10px; } .product-small.box:hover .woocommerce-loop-product__link { color: var(--primary-color); } .product-small.box:hover { transform: translateY(-10px); } /* ảnh sản phẩm trượt lên */ .product-small.box img { display: block; object-position: top; transition: 15s all ease !important; width: 100%; height: 280px; object-fit: cover; position: relative; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 2s cubic-bezier(0.2, 0.96, 0.34, 1); transition: -webkit-transform 2s cubic-bezier(0.2, 0.96, 0.34, 1); transition: transform 2s cubic-bezier(0.2, 0.96, 0.34, 1); transition: transform 2s cubic-bezier(0.2, 0.96, 0.34, 1), -webkit-transform 2s cubic-bezier(0.2, 0.96, 0.34, 1); } .product-small.box:hover img { object-position: bottom; } .box-text-products { padding: 15px; text-align: left; position: relative; } .title p { font-size: 18px; line-height: 1.5; margin-bottom: 0; background: var(--primary-color); display: inline-block; color: #fff; font-weight: 900; padding: 10px 20px; border-radius: 5px; } .title h2 { font-size: 36px; font-weight: 900; color: #414042; line-height: 1.261; margin-bottom: 10px; margin-top: 15px; text-transform: uppercase; } @media (min-width:1920px) { .product-small.box img { height: 320px; } } .device { border-radius: 20px; position: relative; box-sizing: border-box; background: #fff; box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05) } .device img { width: 100%; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .24) } .device:before, .device:after { content: ""; display: block; position: absolute; background: #fff; box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05) } .phone { padding: 12% 3% } .phone.landscape { padding: 1.75% 8% } .tablet { padding: 8% 2% } .tablet.landscape { padding: 1.12% 6% } .laptop { margin-left: 12%; margin-right: 12%; margin-bottom: 2.5%; border-radius: 1vw; padding: 1.35% } .desktop { margin-bottom: 11%; border-radius: 1vw; padding: 1.5% } .phone:after { border-radius: 50%; margin: 0 auto 2%; left: 0; right: 0; bottom: 0; width: 10%; height: 0; padding-top: 10%; box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, .12) } .phone.landscape:after { margin: auto 0; left: calc(100% - 7%); top: 0; bottom: 0; width: 6%; padding-top: 6% } .phone:before { border-radius: 50px; margin: 5.5% auto 0; left: 0; right: 0; top: 0; width: 20%; height: 1%; box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, .12) } .phone.landscape:before { margin: auto 0 auto 4.5%; left: 0; top: 0; bottom: 0; width: 1%; height: 20% } .tablet:after { border-radius: 50%; margin: 0 auto 2%; left: 0; right: 0; bottom: 0; width: 6%; height: 0; padding-top: 6%; box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, .12) } .tablet.landscape:after { margin: auto 0; left: calc(100% - 5.25%); top: 0; bottom: 0; width: 4.5%; padding-top: 4.5% } .tablet:before { border-radius: 50%; margin: 3.5% auto 0; left: 0; right: 0; top: 0; width: 2.25%; height: 0; padding-top: 2.25%; box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, .12) } .tablet.landscape:before { margin: auto 0 auto 2.5%; left: 0; top: 0; bottom: 0; width: 1.75%; padding-top: 1.75% } .laptop:after { border-radius: 4px 4px 48px 48px; left: -15%; bottom: -4%; width: 130%; height: 7% } .desktop img { max-height: 500px; object-fit: cover; object-position: top } .desktop:before { margin: 0 auto; left: 0; right: 0; bottom: -18%; width: 20%; height: 20%; background: #fafafa; z-index: -1 } .desktop:after { border-radius: 4px 4px 24px 24px; margin: 0 auto; left: 0; right: 0; bottom: -19.5%; width: 34%; height: 2% } .device-collection { width: 100%; position: relative } .device-collection:after { content: ""; display: block; padding-top: 62.75% } .device-collection .phone-container, .device-collection .tablet-container, .device-collection .desktop { position: absolute; } .device-collection .phone, .device-collection .tablet { margin: 0 } .device-collection .phone-container { left: 0; max-width: 15%; z-index: 2 } .device-collection .tablet-container { right: 0; max-width: 30%; z-index: 1 } .device-collection .desktop { left: 0; right: 0; margin: 0 5% 10.25% } @media (max-width: 800px) { .device-collection .device { border-radius: 1vw } } .device-collection { max-width: 100%; margin: 40px } .price del span.amount { font-size: 18px; color: #151515; font-weight: 500 } .price del { color: #151515 } .device:hover img { object-position: bottom } /* ảnh sản phẩm trượt lên trang oder sản phẩm */ .device img { transition: 15s all ease !important; position: relative; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 2s cubic-bezier(.2, .96, .34, 1); transition: -webkit-transform 2s cubic-bezier(.2, .96, .34, 1); transition: transform 2s cubic-bezier(.2, .96, .34, 1); transition: transform 2s cubic-bezier(.2, .96, .34, 1), -webkit-transform 2s cubic-bezier(.2, .96, .34, 1); width: 100% } .device:hover img { object-position: bottom } .theme-intro span.amount { font-weight: 500; font-size: 20px; line-height: normal; color: #000; } .theme-intro .price-wrapper { padding-bottom: 25px; } .theme-intro h1 { border: 1px solid #ececec; border-radius: 20px 20px 0 0; padding: 10px 28px 20px; box-shadow: 0px -2px 10px #0000001a; font-size: 20px; color: #000; font-weight: 900; margin-top: 6px; } .custom-product-page .single_add_to_cart_button { width: 100%; letter-spacing: 0; background: linear-gradient(90deg, #cf0a0d, #f90409); border-radius: 999px; padding: 3px; pointer-events: all !important; } .accordion-item { color: var(--bs-accordion-color); background-color: var(--bs-accordion-bg); border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); } .accordion { box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08) !important; overflow: hidden; border-radius: 12px; --bs-accordion-color: #000; --bs-accordion-bg: #fff; --bs-accordion-transition: all 0.4s ease-in-out, border-radius 0.15s ease; --bs-accordion-border-color: var(--bs-border-color); --bs-accordion-border-width: 0px; --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0px; --bs-accordion-btn-padding-x: 40px; --bs-accordion-btn-padding-y: 25px; --bs-accordion-btn-color: #102d47; --bs-accordion-btn-bg: #fff; --bs-accordion-btn-icon-width: 1.25rem; --bs-accordion-btn-icon-transform: rotate(-180deg); --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; --bs-accordion-btn-focus-border-color: #97b9f9; --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(47, 115, 242, 0.25); --bs-accordion-body-padding-x: 40px; --bs-accordion-body-padding-y: 1rem; --bs-accordion-active-color: #2f73f2; --bs-accordion-active-bg: #fff; } .accordion-item:first-of-type .accordion-title { border-top: 0; border-top-left-radius: var(--bs-accordion-border-radius); border-top-right-radius: var(--bs-accordion-border-radius); position: relative; display: block; cursor: pointer; background: #fff; box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .1); padding: 17px 50px 17px 30px; transition: .5s; } .accordion-item { color: var(--bs-accordion-color); background-color: var(--bs-accordion-bg); border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); } .accordion-title { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; font-weight: bold; padding: 20px 10px 15px 20px; } .accordion .toggle { left: unset; right: 0; font-size: 14px; top: 50%; transform: translateY(-50%); } .accordion-inner { font-size: 15px; font-weight: 500; } a.button.custom-btn { border-radius: 99px; font-weight: 800; letter-spacing: 0; font-size: 18px; min-height: 54px; height: 54px; padding-top: 2px; border: none; padding: 5px 60px 0 30px; } a.button.custom-btn:before { background-color: var(--primary-color) !important; border: none; } a.button.custom-btn:before { background: #fff; content: ''; position: absolute; z-index: 0; width: 40px; height: 40px; top: 5px; right: 10px; display: block; border-radius: 999px; background-color: #fff; transition: .2s all ease-in-out; } a.button.custom-btn:after { content: ''; position: absolute; width: 20px; height: 20px; background: url(/wp-content/uploads/2024/10/right-arrow.svg) no-repeat; background-size: 100%; top: 50%; transform: translateY(-60%); right: 20px; z-index: 2; filter: brightness(0) invert(1); } a.button.custom-btn:hover:before { width: calc(100% - -2px); height: calc(100% + 2px); padding-right: 19px; right: -1px; top: -1px; line-height: 50px; z-index: -1; } a.button.custom-btn:hover:before { z-index: 1; } a.button.custom-btn:hover span { color: #fff; z-index: 1; position: relative; } .title-count { font-size: 35px; font-weight: 900; color: var(--fs-color-secondary); } .title-2 h2 { font-size: 35px; font-weight: 900; } .title.title2 p { background-color: var(--fs-color-secondary); transform: rotate(3deg); } .theme-action { margin-top: 12px; } .home .button-action { display: flex; } .btn-theme.view-demo { background: linear-gradient(90deg, #e9ede1, #ddefe2); margin-right: 3px; } .btn-theme.view-detail { border: 1px solid var(--primary-color); color: #000; } .btn-theme { border-top-left-radius: 15px; border-bottom-right-radius: 15px; display: inline-block !important; padding: 0 5px; min-width: 115px; text-align: center; color: #000; outline: 0; -webkit-user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; white-space: nowrap; font-size: 15px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; text-decoration: none; font-weight: 600; } .product-title .woocommerce-loop-product__link { font-weight: 700; color: #000; } .custom-product-page .btn-view { letter-spacing: 0; font-weight: bolder; font-size: 16px; padding: 5px 0 2px; border-radius: 99px; background: linear-gradient(90deg, #506e1a, #4fba69); } .product-small.box del span.amount { font-size: 18px; color: #111; } .product-small .price ins span.amount { color: #FF0000; font-size: 17px; font-weight: bold; } body::-webkit-scrollbar-track { background-color: #d8e8ff; overflow: hidden } body::-webkit-scrollbar { width: 10px; background-color: #f5f5f5 } body::-webkit-scrollbar-thumb { background-color: #0160e7; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); border-radius: 9999px } .button-action { flex-direction: row; flex-wrap: wrap; } .button-action a { flex: 1; } .banner-main { background: url('/wp-content/uploads/2024/09/shape1-home4.png') no-repeat; padding-top: 150px !important; } .img-review { position: absolute; bottom: 0; right: 0; max-width: 400px; } .shape2 { position: absolute; top: 250px; left: -100px; max-width: 400px; height: auto; } .shape1 { position: absolute; top: 30px; right: -100px; max-width: 400px; } .shape3 { position: absolute; bottom: 100px; left: -100px; max-width: 400px; height: auto; } /* @media { .menu-toolbar .menu-item a{ font-size:14px; } .menu-toolbar .nav>li{ width:50%; } } */ @media (min-width:375px) and (max-width: 850px) { .menu-toolbar .menu-item a { font-size: 14px; } .col-form h2, .title h2 { font-size: 24px; } .menu-toolbar .nav>li { width: 50%; margin: 0px; } } @media only screen and (min-width:1024px) and (max-width:1080px) { .button-action { flex-direction: column; } .product-small.box .box-text { height: auto !important; } } .nav-tabs>ul { background-color: #898b8e; border: 2px solid #898b8e !important; width: 480px !important; height: 58px; margin: auto !important; border-bottom: initial; overflow: hidden; margin-bottom: 60px; border-radius: 29px; position: relative; z-index: 9; margin: 0 auto; } .nav-tabs>ul>li { width: 45%; margin: 0; text-align: center; } .nav-tabs>ul>li:nth-child(2) { width: 55%; } .nav-tabs>ul>li>a { display: block; border: initial; line-height: 54px; padding: initial; color: #fff; font-size: 20px; text-transform: none; font-weight: 400 !important; } .nav-tabs>ul>li.active>a { overflow: hidden; background-color: #fff; box-shadow: 0 12px 54px 0 rgba(18, 72, 145, .11); color: #fff; position: relative; border-radius: 29px; color: var(--primary-color); font-weight: 700; margin: 0 -2px; font-weight: 700 !important; } .pulse, .pulse2, .pulse3 { position: relative; background-color: #dd1e26; width: 130px; height: 130px; border-radius: 50% } .pulse2 { width: 60px; height: 60px; border-radius: 50% } .pulse3 { width: 150px; height: 150px; background-color: rgba(107, 193, 249, .15) } .ring, .ring2, .ring3 { position: absolute; background-color: #dd1e26; width: 100%; height: 100%; border-radius: 100%; opacity: .8; animation: pulsing 4s ease-out infinite } .ring3 { background: rgba(107, 193, 249, .25) } .ring:nth-of-type(1), .ring2:nth-of-type(1), .ring3:nth-of-type(1) { animation-delay: -1s } .ring:nth-of-type(2), .ring2:nth-of-type(2), .ring3:nth-of-type(2) { animation-delay: -2s } .ring:nth-of-type(3), .ring2:nth-of-type(3), .ring3:nth-of-type(3) { animation-delay: -3s } .pulse-animation { position: absolute; right: 0; top: 0; opacity: .5 } @keyframes pulsing { 100% { transform: scale(4); opacity: 0 } } .bubbles_wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; overflow: hidden; pointer-events: none } @-webkit-keyframes animateBubble { 0% { margin-top: 20% } to { margin-top: -30% } } @-moz-keyframes animateBubble { 0% { margin-top: 20% } to { margin-top: -30% } } @keyframes animateBubble { 0% { margin-top: 20% } to { margin-top: -30% } } @-webkit-keyframes sideWays { 0% { margin-left: 0 } to { margin-left: 25px } } @-moz-keyframes sideWays { 0% { margin-left: 0 } to { margin-left: 25px } } @keyframes sideWays { 0% { margin-left: 0 } to { margin-left: 25px } } .x1 { -webkit-animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 6%; top: 45%; background: #ffb739 } .x2 { -webkit-animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 5%; top: 80%; background: #fc4fdd } .x3 { -webkit-animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 10%; top: 40%; background: #5ed5cb } .x4 { -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 20%; top: 0; background: #3de4a3 } .x5 { -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 30%; top: 50%; background: #fc4fb1 } .x6 { -webkit-animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 50%; top: 0; background: #2c4aff } .x7 { -webkit-animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 65%; top: 70%; background: #ffb739 } .x8 { -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 80%; top: 10%; background: #8f3de4 } .x9 { -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 90%; top: 50%; background: #fff339 } .x10 { -webkit-animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 80%; top: 80%; background: #fc4f4f } .bubble { border-radius: 50%; box-shadow: none; height: 5px; position: absolute; width: 5px } .btn-main.button.primary:not(.is-outline) { font-size: 28px; line-height: 74px; height: 74px; margin-bottom: 12px; padding: 0 50px; font-weight: 500; box-shadow: 0 2px 29.12px 2.88px rgba(0, 0, 0, .14); } .why-title * { font-size: 18px; font-weight: 900; height: 4rem; } #footer iframe { border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 1px 1px 5px 4px; } .section-tkw:before { content: ''; background: url(/wp-content/uploads/2024/10/5752643.svg) no-repeat; width: 800px; height: 800px; background-size: 100%; right: 0; top: 0; position: absolute; } .tkw-package-lib-width { width: 91.6666666667%; margin-left: auto; position: relative; z-index: 1; } .tkw-package-lib { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; background: rgba(206, 206, 206, .24); box-shadow: 1rem 1rem 6rem rgba(0, 0, 0, .16); border-radius: .8rem; transform: rotate(8deg); overflow: hidden; } .tkw-package-left { width: 40%; position: relative; z-index: 3; } .tkw-package-left .image { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; height: 100%; background: #fff; } .tkw-package-left img { width: 100%; height: 100%; transform: rotate(270deg); } .tkw-package-right { width: 60%; } .tkw-package-list { padding: 1.2rem; } .tkw-package-items:not(:last-child) { margin-bottom: .8rem; } .tkw-package-items { padding: 15px; background: #fff; border-radius: .4rem; align-items: center; } .tkw-package-item { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; gap: 1rem; align-items: center; } .tkw-package-item .icon { display: block; width: 2.4rem; height: 2.4rem; flex-shrink: 0; } .tkw-package-item .icon img { display: block; } .tkw-package-item .text { opacity: .7; color: #354a60; margin-bottom: 0; } .block-info ul { list-style: none; padding: 0; margin: 0; } .check-list2 ul li { background: url(/wp-content/uploads/2024/10/check.svg) no-repeat; background-size: 22px; padding-left: 29px; margin-left: 0; background-position: left 2px; } .text-graphic { font-size: 16px; font-weight: 400; color: #000; display: block; position: relative; line-height: 1.375; margin-top: 45px; margin-bottom: 48px; text-align: left; margin-left: 40px; } .text-graphic:before { content: ""; width: 161px; height: 65px; background: url(/wp-content/uploads/2024/10/km-tag.png) no-repeat top left; background-size: contain; position: absolute; left: 75px; transform: translateX(-50%); top: -75px; z-index: 2; } .banner-main h1 { margin: 0 0 35px; font-weight: 300; font-size: 45px; font-weight: 900; line-height: 1.187; } .banner-main p { font-size: 22px; color: rgb(79, 79, 79); margin-bottom: 50px; line-height: 1.478; } .home-category .box { background-size: 60%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 452.3 429.1' style='enable-background:new 0 0 452.3 429.1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bopacity:0.13;%7D .st1%7Bfill:%2353c4ee;%7D .st2%7Bfill:none;stroke:%236898FF;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0,0,7.54,9.42;%7D .st3%7Bfill:%23FFFFFF;%7D .st4%7Bfill:url(%23SVGID_1_);%7D .st5%7Bfill:url(%23SVGID_00000110428921044285960840000010481460626747405743_);%7D .st6%7Bfill:url(%23SVGID_00000044887847723158335830000008855172864059985081_);%7D .st7%7Bfill:url(%23SVGID_00000013167482355818810230000008589843805427572391_);%7D .st8%7Bfill:url(%23SVGID_00000164478269194975618630000016905962507538998189_);%7D .st9%7Bfill:url(%23SVGID_00000038406327519698958740000007515024386193293962_);%7D .st10%7Bfill:%23E8F5FF;%7D .st11%7Bfill:none;stroke:%23A061FF;stroke-width:3.76;stroke-linecap:round;stroke-linejoin:round;%7D .st12%7Bfill:url(%23SVGID_00000083801318980251512620000006563490973185961125_);%7D .st13%7Bfill:url(%23SVGID_00000089538811332283573110000016549770531789412538_);%7D .st14%7Bfill:url(%23SVGID_00000053533037529552781850000016294173494794205367_);%7D .st15%7Bfill:url(%23SVGID_00000181795911351054946490000000064794359652941206_);%7D .st16%7Bfill:url(%23SVGID_00000067934300898420939280000017428575340554653060_);%7D .st17%7Bfill:url(%23SVGID_00000020357468905584538590000013183706364509075593_);%7D .st18%7Bfill:url(%23SVGID_00000096765224450007231240000012679163353294406051_);%7D .st19%7Bfill:url(%23SVGID_00000016055215612685287690000004408379754794343060_);%7D %3C/style%3E%3Cg id='BACKGROUND'%3E%3Cg class='st0'%3E%3Cpath class='st1' d='M309.6,29.2C257,46.8,269.2,87.8,217,143.1C159.5,204,23.6,202.5,34.2,293.5 c11.7,100.3,165.2,166.8,290.5,86.8c71.6-45.7,129.2-149.2,106.1-233.7C407.7,62.1,341.4,18.6,309.6,29.2L309.6,29.2z'%3E%3C/path%3E%3Cellipse transform='matrix(0.7071 -0.7071 0.7071 0.7071 -85.4769 73.8958)' class='st1' cx='46.5' cy='140.1' rx='30.4' ry='30.4'%3E%3C/ellipse%3E%3Cellipse transform='matrix(0.5657 -0.8246 0.8246 0.5657 16.8949 186.9375)' class='st1' cx='185.9' cy='77.4' rx='79.5' ry='39.2'%3E%3C/ellipse%3E%3C/g%3E%3C/g%3E%3C/svg%3E") } .box, .box-image, .box-text { transition: opacity .3s, transform .3s, background-color .3s; } .home-category .box .box-image { border: 4px solid #ededed; transition: all .5s; } .seciton-quytrinh { background-image: url(https://wpdemo.archiwp.com/onum/wp-content/uploads/sites/3/2020/02/shape2-home4.png); background-position: top right; background-repeat: no-repeat; } .seciton-quytrinh .process p:first-child { font-weight: 700; font-size: 15px; color: var(--primary-color); margin-bottom: 0; } .seciton-quytrinh .process p { font-size: 15px; text-align: justify; font-weight: 500; } .pricing-table-wrapper .pricing-table { border: none; position: relative; text-align: left; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; border-radius: 15px; -webkit-border-radius: 15px; box-shadow: 0 3px 20px rgba(0, 0, 0, .08) !important; padding: 40px 0 } .pricing-table .price { color: #102d47; font-weight: 900; padding: 10px 40px } .pricing-table .title { color: #a5b7d2; letter-spacing: 0; text-transform: initial; font-size: 18px; font-weight: 700; background-color: transparent !important; border-bottom: 0; padding: 10px 40px; padding-bottom: 0 } .pricing-table .items { padding: 10px 40px; font-weight: 500; color: #212529 } .pricing-table .items .text { position: relative; padding-left: 27px } .pricing-table .items .text:before { content: ""; speak: none !important; display: inline-block; font-display: block; font-family: fl-icons !important; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; line-height: 1.4; margin: 0; padding: 0; position: relative; text-transform: none !important; background: var(--primary-color); width: 20px; height: 20px; border-radius: 999px; text-align: center; display: inline-flex; align-items: center; justify-content: center; left: 0; position: absolute; top: 0; color: #fff } .pricing-table-wrapper .pricing-table:before { content: ''; background: url('/wp-content/uploads/2024/10/top-price1-1.png') no-repeat; background-size: 100%; position: absolute; width: 200px; height: 200px; top: 0; z-index: 0; left: 0; right: 0; margin: auto } .pricing-table-wrapper .pricing-table { background: url('/wp-content/uploads/2024/10/bot-price1-1.png') no-repeat; background-position: bottom left; z-index: 0 } .pricing-table-header { z-index: 1; position: relative } .pricing-table .items>div { border: none } .pricing-table-wrapper .pricing-table.featured-table { background-color: var(--primary-color); background: var(--primary-color) } .pricing-table-wrapper .pricing-table.featured-table:before { opacity: .1 } .pricing-table-wrapper .pricing-table.featured-table * { color: #fff } .pricing-table.featured-table .items .text:before { background-color: #fff; color: var(--primary-color) } .icon-bg:hover .icon-box-img svg, .icon-bg:hover .icon-box-img svg path, .icon-bg.active .icon-box-img svg path { fill: var(--primary-color); } .padding-bot>.col, .padding-bot { padding-bottom: 0 } .icon-bg { border-radius: 15px; background-color: #fff; box-shadow: 0 24px 32px 0 rgba(63, 71, 99, .05); padding: 20px 0; text-align: center; transition: all .5s; height: 100%; } .icon-bg .icon-box-img { height: 50px; } .icon-box-img svg { fill: currentColor; height: 100%; transition: all .3s; width: 100%; } .icon-box-img img, .icon-box-img svg { padding-top: .2em; width: 100%; } .icon-bg h3 { font-size: 36px; font-weight: 700; line-height: .889; margin: 10px; } .icon-bg p { color: #444; font-size: 18px; margin: 0; font-weight: 500; } .tab-cus-content>.col-inner { height: 100%; background: #fff; border-radius: 0 25px 25px 0; position: relative; left: 1px; padding: 30px 50px 60px; } .radius * { border-radius: 100%; } .tab-cus-content .desc { font-size: 15px; color: #000; line-height: 1.706; text-align: justify; background: url(/wp-content/uploads/2024/10/icon-ellipse.png) no-repeat top left; padding-top: 95px; } .tab-cus-content .desc p { margin-bottom: 16px; } .tab-cus-content .name { padding-left: 15px; border-left: 3px solid var(--primary-color); } .tab-cus-content .name h4 { font-size: 16px; font-weight: 400; } .tab-cus-content .name h4 strong { font-size: 24px; color: var(--primary-color); margin-bottom: 0; } .tab-cus-content .name p { margin-bottom: 0; } .appointment { background: #fff; position: relative; z-index: 1 } .appointment .item { position: relative } .appointment .item label { font-size: 14px; font-weight: 500; position: absolute; z-index: 1; background: #fff; left: 10px; top: -8px; padding: 0 10px; display: inline-block; width: auto; border-radius: 5px; color: #333 } .appointment .item .wpcf7-form-control-wrap * { height: 50px; border-radius: 5px; box-shadow: none; font-size: 14px; padding-left: 20px } .appointment .item .wpcf7-form-control-wrap *:focus, input:-internal-autofill-selected { background-color: transparent } .appointment .item .wpcf7-form-control-wrap select { height: 60px } .appointment .title { margin-bottom: 30px } .form-lienhe.appointment .wpcf7-submit { margin: unset } .appointment .wpcf7-submit { display: flex; justify-content: center; align-items: center; margin: 0 auto; gap: 10px; border-radius: 999px; position: relative; z-index: 1; transition: color .1s ease-in-out, background-color 1s ease-in-out; padding: 0 10px 0 30px; height: 54px; line-height: 0; background-color: var(--primary-color); border: none; border: 2px solid var(--primary-color); font-weight: 800; color: #fff } .appointment .wpcf7-submit:before { background: #fff; content: ''; position: absolute; z-index: 0; width: 40px; height: 40px; top: 5px; right: 10px; display: block; border-radius: 999px; background-color: #fff; transition: .2s all ease-in-out } .appointment .wpcf7-submit span { width: 40px; height: 40px; display: inline-flex; background: #fff; border-radius: 99px; justify-content: center; z-index: 1; padding: 10px } .appointment .wpcf7-submit svg { width: 20px; height: 20px } .appointment .wpcf7-submit:hover { color: var(--primary-color); z-index: 2 } .appointment .wpcf7-submit:hover:before { width: calc(100% - -2px); height: calc(100% + 2px); padding-right: 19px; right: -1px; top: -1px; line-height: 50px; z-index: -1 } input[type=email], input[type=number], input[type=search], input[type=tel], input[type=text], input[type=url], textarea { box-shadow: none; padding: 22px 10px; box-shadow: none; border-radius: 4px; } @media (max-width: 850px) { .banner-main h1 { font-size: 25px; line-height: 38px; margin: 0 0 20px; } .banner-main br { display: none; } .col-form h2, .title h2 { font-size: 24px; } .title h2 br { display: none; } .tab-panels .btn-main.button.primary:not(.is-outline) { display: block; width: max-content; margin: 0 auto 17px; } .btn-main.button.primary:not(.is-outline) { height: 60px; line-height: 60px; font-size: 22px; padding: 0 40px; margin-top: 16px; } .shape1 { top: 120px; max-width: 280px; } } @media(max-width:425px) { .shape1 { top: 160px; } } .wapf { width: 100%; border: 1px solid #ececec; border-radius: 20px 20px 0 0; padding: 10px 28px 20px; box-shadow: 0px -2px 10px #0000001a; background: #fff; } .wapf .wapf-wrapper { max-height: 310px; overflow-y: scroll; margin-top: 15px; border: 1px solid #dedede; border-radius: 4px; padding: 15px; } .ban-duoc-gi .large-12 .col-inner { padding: 5px; border-radius: 5px; border: 1px dashed #e20000; } /*************** ADD CSS HERE ***************/ .phongvt-title-khachhang h2 { color: #111; font-size: 29px; font-weight: bold; line-height: 1; text-shadow: rgb(0 0 0) 1px 1px 1px; } .dang-ky a { width: 49%; display: inline-block !important; margin: 0 !important; box-sizing: border-box; font-weight: bold; border-radius: 0 !important; line-height: 1.3; padding: 10px 0 !important; } .dang-ky .fancybox { background: #1daf00; } .dang-ky a span { font-size: 11px; text-transform: initial; .dang-ky a span { font-size: 17px !important; letter-spacing: 0; font-weight: normal; } .dang-ky>a { letter-spacing: 2px; font-size: 110%; } .dang-ky a span { font-size: 16px !important; } .col { padding-bottom: 15px; } } @font-face { font-family: 'SVN-Gilroy'; src: url('./assets/fonts/SVN-Gilory/SVN-GilroyLight.eot'); src: url('./assets/fonts/SVN-Gilory/SVN-GilroyLight.eot?#iefix') format('embedded-opentype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyLight.woff2') format('woff2'), url('./assets/fonts/SVN-Gilory/SVN-GilroyLight.woff') format('woff'), url('./assets/fonts/SVN-Gilory/SVN-GilroyLight.ttf') format('truetype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyLight.svg#SVN-GilroyLight') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'SVN-Gilroy'; src: url('./assets/fonts/SVN-Gilory/SVN-Gilroy.eot'); src: url('./assets/fonts/SVN-Gilory/SVN-Gilroy.eot?#iefix') format('embedded-opentype'), url('./assets/fonts/SVN-Gilory/SVN-Gilroy.woff2') format('woff2'), url('./assets/fonts/SVN-Gilory/SVN-Gilroy.woff') format('woff'), url('./assets/fonts/SVN-Gilory/SVN-Gilroy.ttf') format('truetype'), url('./assets/fonts/SVN-Gilory/SVN-Gilroy.svg#SVN-Gilroy') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'SVN-Gilroy'; src: url('./assets/fonts/SVN-Gilory/SVN-GilroyBold.eot'); src: url('./assets/fonts/SVN-Gilory/SVN-GilroyBold.eot?#iefix') format('embedded-opentype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyBold.woff2') format('woff2'), url('./assets/fonts/SVN-Gilory/SVN-GilroyBold.woff') format('woff'), url('./assets/fonts/SVN-Gilory/SVN-GilroyBold.ttf') format('truetype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyBold.svg#SVN-GilroyBold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'SVN-Gilroy'; src: url('./assets/fonts/SVN-Gilory/SVN-GilroyMedium.eot'); src: url('./assets/fonts/SVN-Gilory/SVN-GilroyMedium.eot?#iefix') format('embedded-opentype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyMedium.woff2') format('woff2'), url('./assets/fonts/SVN-Gilory/SVN-GilroyMedium.woff') format('woff'), url('./assets/fonts/SVN-Gilory/SVN-GilroyMedium.ttf') format('truetype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyMedium.svg#SVN-GilroyMedium') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'SVN-Gilroy'; src: url('./assets/fonts/SVN-Gilory/SVN-GilroySemiBold.eot'); src: url('./assets/fonts/SVN-Gilory/SVN-GilroySemiBold.eot?#iefix') format('embedded-opentype'), url('./assets/fonts/SVN-Gilory/SVN-GilroySemiBold.woff2') format('woff2'), url('./assets/fonts/SVN-Gilory/SVN-GilroySemiBold.woff') format('woff'), url('./assets/fonts/SVN-Gilory/SVN-GilroySemiBold.ttf') format('truetype'), url('./assets/fonts/SVN-Gilory/SVN-GilroySemiBold.svg#SVN-GilroySemiBold') format('svg'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'SVN-Gilroy'; src: url('./assets/fonts/SVN-Gilory/SVN-GilroyHeavy.eot'); src: url('./assets/fonts/SVN-Gilory/SVN-GilroyHeavy.eot?#iefix') format('embedded-opentype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyHeavy.woff2') format('woff2'), url('./assets/fonts/SVN-Gilory/SVN-GilroyHeavy.woff') format('woff'), url('./assets/fonts/SVN-Gilory/SVN-GilroyHeavy.ttf') format('truetype'), url('./assets/fonts/SVN-Gilory/SVN-GilroyHeavy.svg#SVN-GilroyHeavy') format('svg'); font-weight: 900; font-style: normal; font-display: swap; } body { font-family: 'SVN-Gilroy'; overflow: hidden; font-weight: 500; } @media only screen and (max-width: 48em) { /*************** ADD MOBILE ONLY CSS HERE ***************/ @media (max-width: 767px) { .device-collection .phone-container, .device-collection .tablet-container, .device-collection .desktop { position: unset; } } }