@charset "UTF-8"; *, ::after, ::before { box-sizing: border-box; } button, select { cursor: pointer; } button, input { overflow: visible; } button, input, optgroup, select, textarea { outline: none; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: #000; border-radius: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number] { -moz-appearance: textfield; } input[type=date]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; } body { color: #000; font-family: "Inter", sans-serif; background: #fafafb; position: relative; font-size: 14px; word-break: break-word; counter-reset: section; font-weight: 400; line-height: 1.5; margin: auto; min-height: 100vh; } img { max-width: 100%; height: auto; } table { width: 100%; } a { text-decoration: none; } ::-webkit-scrollbar-track { background: #f5f5f5; } ::-webkit-scrollbar-thumb { background: grey; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #ccc; } ::-webkit-scrollbar { width: 8px; height: 10px; } .clearfix::after { content: ""; clear: both; display: block; } .inherit { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; } .line-clamp-2 { text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-4 { text-overflow: ellipsis; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-5 { text-overflow: ellipsis; -webkit-line-clamp: 5; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .icons { background: url(../images/global-sprite.png) no-repeat; background-size: 400px 400px; background-position: 0 40px; } .admin-global-container { max-width: 1720px; margin: auto; display: flex; } .admin-menu-container { position: relative; overflow: auto; background: #004180; color: #fff; width: 18%; padding: 20px 0; line-height: 20px; } .admin-menu-container a { color: #fff; } .admin-menu-container .menu-logo { display: table; margin-bottom: 50px; margin-left: 16px; } .admin-menu-container .menu-logo img { height: 22px; } .admin-menu-container .menu-list { margin: 50px 5px; } .admin-menu-container details .item { background: #004e99; } .admin-menu-container details[open] svg { transform: rotate(90deg); } .admin-menu-container details[open] summary { background: #81b5e4; } .admin-menu-container details[open] summary a { font-weight: 700; } .admin-menu-container details[open] .icons { filter: brightness(100); } .admin-menu-container details[open] .fa-angle-right { transform: rotate(90deg); } .admin-menu-container summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding-right: 16px; border-radius: 4px; position: relative; transition: 0.3s all; } .admin-menu-container summary a { padding: 8px 16px; display: flex; align-items: center; } .admin-menu-container svg { position: absolute; right: 16px; transition: 0.3s all; } .admin-menu-container .item { display: flex; align-items: center; padding: 0 12px; line-height: 36px; transition: 0.3s all; border-radius: 4px; margin-bottom: 4px; } .admin-menu-container .item:hover, .admin-menu-container .item.active { background: #22a2ff; } .admin-menu-container .item:hover .icons, .admin-menu-container .item.active .icons { filter: brightness(100); } .admin-menu-container .item .icons { width: 20px; height: 20px; margin-right: 13px; } .admin-menu-container .title { /*width: calc(100% - 33px);*/ } .admin-menu-container .sub-menu { position: relative; } .admin-menu-container .sub-menu a { display: block; padding: 10px 10px 10px 45px; position: relative; } .admin-menu-container .sub-menu a:hover { text-decoration: underline; } .admin-menu-container .sub-menu a.current { font-weight: 700; text-decoration: none; background: #22a2ff; border-radius: 4px; } .admin-menu-container .sub-menu a:last-child { margin: 0; } .admin-menu-container .icon-home { background-position: -9px -7px; } .admin-menu-container .icon-order { background-position: -45px -7px; } .admin-menu-container .icon-product { background-position: -81px -8px; } .admin-menu-container .icon-customer { background-position: -117px -8px; } .admin-menu-container .icon-marketing { background-position: -154px -8px; } .admin-menu-container .icon-content { background-position: -187px -8px; } .admin-menu-container .icon-stats { background-position: -224px -8px; } .admin-menu-container .icon-system { background-position: -262px -8px; } .admin-menu-container .icon-settings { background-position: -297px -8px; } .admin-menu-container .icon-support { background-position: -332px -7px; } .admin-menu-container .icon-account { background-position: -367px -9px; } .admin-menu-container .icon-logout { background-position: -9px -45px; } .admin-menu-container .icon-close { position: absolute; right: 10px; } .admin-menu-container .icon-investor_relation { background-position: -9px -126px; } .admin-menu-container .icon-job { background-position: -52px -126px; } .admin-menu-container .icon-pcbuilder { background-position: -99px -126px; } .admin-menu-container .icon-payinstall { background-position: -142px -125px; } .admin-menu-container .icon-distributor { background-position: -187px -126px; } .admin-menu { color: #fff; z-index: 1; } .admin-menu .item { display: flex; align-items: center; transition: 0.3s all; position: relative; margin: 5px; background: #004e99; border-radius: 4px; } .admin-menu .item:hover, .admin-menu .item.current { background: #22a2ff; } .admin-menu .item:hover .icons, .admin-menu .item.current .icons { filter: brightness(100); } .admin-menu .item:hover .sub-menu { left: calc(100% + 8px); opacity: 1; visibility: inherit; } .admin-menu .item:hover::before { display: block; } .admin-menu .item.bottom .sub-menu { top: unset; } .admin-menu .item.bottom:hover .sub-menu { top: auto; bottom: 0; } .admin-menu .item::before { position: absolute; content: ""; width: 50px; right: -20px; height: 41px; display: none; } .admin-menu .item:nth-child(n+10) .sub-menu { top: unset; bottom: -45px; } .admin-menu .sub-menu { padding: 10px 22px 10px 15px; border-radius: 6px; background: #004e99; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); white-space: nowrap; min-width: 150px; z-index: -1; transition: 0.2s all; position: absolute; left: calc(100% + 30px); top: 0; opacity: 0; visibility: hidden; min-width: 200px; } .admin-menu .sub-menu a { display: block; margin-bottom: 12px; line-height: 18px; position: relative; } .admin-menu .sub-menu a:hover { text-decoration: underline; } .admin-menu .sub-menu a.current { font-weight: 700; text-decoration: none; } .admin-menu .sub-menu a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #79b0e2; position: absolute; top: 6px; left: -16px; } .admin-menu .sub-menu a:last-child { margin: 0; } .admin-menu .menu-list { padding-left: 16px; margin-top: 10px; position: relative; max-height: 350px; overflow-y: auto; padding-right: 10px; margin-right: -12px; } .admin-menu .menu-list::before { content: ""; width: 1.5px; background: #79b0e2; position: absolute; left: 3px; top: 7px; bottom: 7px; } .admin-menu .menu-list::-webkit-scrollbar-thumb { background: #fff; } .admin-menu .menu-list::-webkit-scrollbar-track { background: transparent; } .admin-menu .icons { width: 42px; height: 31px; } .admin-menu .icon-home { background-position: 4px -1px; } .admin-menu .icon-sell { background-position: -32px -1px; } .admin-menu .icon-product { background-position: -68px -1px; } .admin-menu .icon-user { background-position: -105px -1px; } .admin-menu .icon-marketing { background-position: -142px -1px; } .admin-menu .icon-content { background-position: -175px -1px; } .admin-menu .icon-stats { background-position: -210px -1px; } .admin-menu .icon-system { background-position: -249px -1px; } .admin-menu .icon-settings { background-position: -285px -1px; margin-left: -1px; } .admin-menu .icon-support { background-position: -320px -1px; } .admin-menu .icon-account { background-position: -356px -1px; } .admin-menu .icon-logout { background-position: 4px -37px; } .admin-menu .icon-investor_relation { background-position: 6px -115px; } .admin-menu .icon-job { background-position: -41px -118px; } .admin-menu .icon-pcbuilder { background-position: -87px -118px; } .admin-menu .icon-payinstall { background-position: -130px -118px; } .admin-menu .icon-distributor { background-position: -175px -114px; } .admin-menu .logo { position: relative; background: transparent; border: 0; } .admin-menu .icon-close { width: 42px; display: block; background-color: #22a2ff; height: 31px; margin: 0 auto; border-radius: 4px; } .admin-menu .icon-close i { display: block; margin: 0 auto; text-align: center; line-height: 33px; } .admin-content-container { width: calc(100% - 50px); } .admin-content-container.show-large-menu { width: 82%; margin-left: 0; } .admin-content-container .note-list { min-width: 144px; } .admin-content-container .note-list a { display: block; padding: 0 10px; line-height: 35px; transition: 0.2s all; } .admin-content-container .note-list a:hover { background: #f5f7ff; color: #0041e8; font-weight: 600; } .admin-content-container .content-holder { padding: 16px 0 16px 16px; } .table-fixed { text-align: center; } .table-fixed td { padding: 13px 8px; border: 1px solid #ececec; } .table-fixed tbody td { padding: 5px 8px; } .table-fixed tbody td:nth-child(2), .table-fixed tbody td:nth-child(3) { text-align: left; } .table-fixed tbody td:nth-child(2) { color: #0041e8; } .admin-home-tab { overflow: auto; } .admin-home-tab a { color: #a0a8b5; padding: 9px 7.7px; text-align: center; border-right: 1px solid #dde1eb; white-space: nowrap; } .admin-home-tab a:last-child { border: 0; } .admin-home-tab a:hover, .admin-home-tab a.current { background: #0041e8; color: #fff; } .home-report-holder { display: none; } .home-report-holder table { width: 100%; line-height: 20px; text-align: center; } .home-report-holder thead { background: #f6f6f6; font-weight: 500; } .home-report-holder td { border: 1px solid #ececec; padding: 14px 5px; } .home-report-holder td a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-report-holder td:nth-child(2) { text-align: left; } .home-todo-list td { padding: 0 4px; color: #000 !important; } .home-todo-list td:nth-child(1), .home-todo-list td:nth-child(3), .home-todo-list td:nth-child(4) { white-space: nowrap; } .product-list th { padding: 10px; border: 1px solid #ececec; background: #f6f6f6; } .product-list td { padding: 8px; border: 1px solid #ececec; } .product-sale-info td { padding: 14px; border: 1px solid #ececec; } input[type=radio] { position: absolute; } input[type=radio]:before { content: ""; background: #fff; border-radius: 100%; border: 1.5px solid #0041e8; display: inline-block; width: 18px; height: 18px; position: relative; top: -0.2em; margin-right: 1em; vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease; } input[type=radio]:checked:before { background-color: #0041e8; box-shadow: inset 0 0 0 3px #fff; } input[type=radio]:focus:before { outline: none; border-color: #0041e8; } .table-seo td { padding: 14px; border: 1px solid #ececec; } .product-specifications td { padding: 14px; border: 1px solid #ececec; } .table-config th { padding: 10px 5px; background: #f6f6f6; border: 1px solid #ececec; } .table-config td { padding: 10px; border: 1px solid #ececec; } .accessory th { padding: 10px 5px; background: #f6f6f6; border: 1px solid #ececec; } .accessory td { padding: 10px 6px; border: 1px solid #ececec; } .icons { width: 30px; height: 30px; display: block; } .icons.icon-search { background-position: -71px -40px; } .icons.header-support { height: 33px; background-position: -116px -42px; } .icons.icon-notification { height: 33px; background-position: -165px -42px; } .icons.icon-cart { background-position: -210px -36px; } .icons.icon-contact { background-position: -246px -36px; } .icons.icon-pay { background-position: -284px -36px; } .icons.icon-installment { background-position: -318px -36px; } .icons.icon-increase { width: 20px; height: 20px; background-position: -6px -85px; } .icons.icon-reduce { width: 20px; height: 20px; background-position: -43px -83px; } .icons.icon-edit { width: 16px; height: 16px; background-position: -114px -89px; } .icons.icon-view { width: 16px; height: 16px; background-position: -187px -88px; } .icons.icon-remove { width: 16px; height: 16px; background-position: -151px -88px; } .icons.icon-hide { width: 16px; height: 16px; background-position: -224px -88px; } .icons.icon-upload { background-position: -2px -43px; transform: rotate(-90deg); filter: invert(60%) sepia(90%) saturate(6183%) hue-rotate(228deg) brightness(92%) contrast(101%); } .icons.icon-feature { width: 18px; height: 16px; background-position: -259px -88px; } .icons.icon-copy { width: 15px; height: 15px; background-position: -330px -88px; } .admin-header-container .menu-hide { margin-left: 30px; } /* Bán hàng */ .page-input { width: 100%; height: 36px; padding: 0 10px; border-radius: 4px; border: 1px solid #d8d8d8; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); } .order-page .order-page-title a { margin: 0 2px 0 0; border-radius: 4px 4px 0px 0px; background: #f6f6f6; color: #919699; font-weight: 500; padding: 0 24px; } .order-page .order-page-title a:hover, .order-page .order-page-title a.current, .order-page .order-page-title a.active { background: #0041e8; color: #fff; } .order-page .order-page-table { text-align: center; } .order-page .order-page-table thead td { padding: 8px; } .order-page .order-page-table td { padding: 14px 8px; text-align: center; vertical-align: middle; } .order-page .order-page-table td:nth-child(4), .order-page .order-page-table td:nth-child(10) { text-align: left; } .order-page-table { line-height: 20px; } .order-page-table a { color: #0041e8; } .order-page-table table { width: 100%; } .order-page-table thead { background: #f6f6f6; font-weight: 500; text-align: center; white-space: nowrap; } .order-page-table thead td { padding: 8px; } .order-page-table tbody td { vertical-align: top; } .order-page-table tbody tr:hover { background: #f5f7ff; } .order-page-table td { padding: 10px; border: 1px solid #ececec; } .order-page-table select { border-radius: 4px; border: 1px solid #d8d8d8; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); height: 32px; display: block; width: 100%; padding: 0 0 0 5px; font-weight: 400; } .order-page-table .icons { width: 30px; height: 30px; border: 1px solid #ececec; background-color: #f9f9f9; border-radius: 5px; } .order-page-table .icon-edit { border: 1px solid #0041e8; background-color: #f5f7ff; background-position: -108px -82px; margin-right: 6px; } .order-page-table .icon-delete { background-position: -145px -82px; } .order-detail-page .icon-edit { border: transparent; background-color: transparent; margin: 0; width: 18px; height: 18px; } .is-close-btn { background: #ececec !important; border-radius: 50%; top: 10px !important; right: 10px !important; color: #9e9e9e !important; } .td-border-0 td { border: 0 !important; padding: 3px 0; width: auto; } .paging { margin: 30px 0; display: flex; align-items: center; justify-content: center; line-height: 28px; } .paging a { margin: 0 3px; min-width: 28px; text-align: center; font-size: 16px; padding: 0 10px; border-radius: 4px; } .paging a:hover, .paging a.current, .paging a.active { background: #0041e8; color: #fff; } .global-breadcrumb-container { padding: 16px; line-height: 20px; } .global-breadcrumb-container a { display: inline-block; } .global-breadcrumb-container a:hover { color: #0041e8; } .global-breadcrumb-container a::after { content: "\f054"; font-family: Fontawesome; font-size: 10px; margin: 0 5px; } .global-breadcrumb-container a:last-child { color: #0041e8; } .global-breadcrumb-container a:last-child::after { content: none; } .table-brand th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; } .table-brand td { padding: 7px 6px; border: 1px solid #ececec; } .table-vertical-inherit tbody td { padding: 8px; vertical-align: inherit; } #js-form-search [type=search]:focus::before { position: absolute; content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; left: 0; top: 0; } .autocomplete-suggestions { height: 334px; overflow-y: auto; z-index: 999; } .autocomplete-suggestions .item { padding: 10px 15px; border-bottom: 1px solid #ededed; } .autocomplete-suggestions .item:hover { font-weight: 700; background: #f6f6f6; } .table-list-customer th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; } .table-list-customer td { padding: 7px 6px; border: 1px solid #ececec; } .table-comment th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; } .table-comment td { padding: 7px 6px; border: 1px solid #ececec; } .list-info-reply th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; } .list-info-reply td { padding: 7px 6px; border: 1px solid #ececec; } .table-list-category td { padding: 6px 5px; border: 1px solid #ececec; } .table-list-category a { color: #0041e8; } .input-file { position: relative; } .input-file input { opacity: 0; } .input-file .title { position: absolute; top: 0; left: 10px; display: flex; align-items: center; } .input-file .btn-input-file { width: 120px; height: 30px; text-align: center; line-height: 30px; border-radius: 4px; border: 1px solid #0041e8; color: #0041e8; cursor: pointer; margin-right: 10px; } .input-file .btn-input-file:hover { background: #0041e8; color: #fff; } .modal .order-page-table td { vertical-align: middle; } .modal .brand-letters a { width: 11.1111111111%; text-transform: capitalize; color: #0041e8; } .modal .brand-letters a:hover { text-decoration: underline; } .table-brand th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; } .table-brand td { padding: 7px 6px; border: 1px solid #ececec; } .table-attribute th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; } .table-attribute td { padding: 7px 6px; border: 1px solid #ececec; } .table-attribute a { color: #0041e8; } .table-attribute .status { width: 106px; display: block; height: 20px; border: 1px solid gray; font-size: 12px; font-weight: 700; text-align: center; color: gray; border-radius: 50px; background: #fff; } .table-attribute .status.on { border: 1px solid #6dc580; color: #03781d; background: #f0f9f2; } .table-attribute .status.off { border: 1px solid red; color: red; background: rgb(255, 245, 245); } .table-value th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; text-align: left; } .table-value td { padding: 7px 6px; border: 1px solid #ececec; } .table-config-group th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; text-align: left; } .table-config-group td { padding: 7px 6px; border: 1px solid #ececec; } .table-config-group a { color: #0041e8; } .table-config-pro th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; text-align: left; } .table-config-pro td { padding: 7px 6px; border: 1px solid #ececec; } .table-config-pro .name { color: #0041e8; } .table-addon th, .table-spec th, .spec-info th, .table-list-competitor th, .table-customer-group th, .table-review th, .table-newsletter th, .style-table th { padding: 7px 5px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; text-align: left; } .table-addon td, .table-spec td, .spec-info td, .table-list-competitor td, .table-customer-group td, .table-review td, .table-newsletter td, .style-table td { padding: 7px 6px; border: 1px solid #ececec; } .table-addon .name, .table-spec .name, .spec-info .name, .table-list-competitor .name, .table-customer-group .name, .table-review .name, .table-newsletter .name, .style-table .name { color: #0041e8; } .input-date { position: relative; } .input-date::before { position: absolute; top: 50%; right: 15px; transform: translate(0, -50%); content: "\f133"; font-family: "Font Awesome 6 Free"; } .css-table th { padding: 10px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; text-align: left; } .css-table td { padding: 10px; border: 1px solid #ececec; } .css-table .name { color: #0041e8; } .style-checkbox { display: block; position: relative; padding-left: 26px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .style-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .style-checkbox .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background: #fff; border: 1.5px solid #c5c5c5; border-radius: 4px; } .style-checkbox:hover input ~ .checkmark { background: #fff; } .style-checkbox input:checked ~ .checkmark { background-color: #0041e8; border: 1px solid #0041e8; } .style-checkbox .checkmark:after { content: ""; position: absolute; display: none; } .style-checkbox input:checked ~ .checkmark:after { display: block; } .style-checkbox .checkmark:after { left: 6px; top: 1px; width: 6px; height: 13px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); } .box-note { position: relative; } .box-note i { cursor: pointer; } .box-note .content { position: absolute; left: 30px; top: 6px; width: 300px; display: none; font-size: 12px; background: #e4b200; color: #fff; padding: 10px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1490196078); border-radius: 6px; z-index: 9; } .box-note .content::before { position: absolute; content: ""; left: -14px; top: 0; width: 20px; height: 15px; -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0); clip-path: polygon(0 0, 100% 100%, 100% 0); background: #e4b200; border-radius: 5px 0 0 0; } .box-note:hover .content { display: block; } .list-category .style-checkbox .checkmark:after { left: 6px; } .list-category .style-checkbox { color: #919699; } .order-detail-page .select2-container { width: 100% !important; margin-top: 10px; } #overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 9; display: none; } #overlay.active { display: block; } .status-notificatiom { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 550px; height: 240px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1019607843); border-radius: 15px; display: none; z-index: 9999; } .status-notificatiom.active { display: block; } .status-notificatiom .icon-close { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; background: #ececec; line-height: 30px; text-align: center; border-radius: 50%; } .status-notificatiom .content { height: 100%; } .status-notificatiom .fa-check { width: 70px; height: 70px; background: #52c41a; color: #fff; font-size: 50px; text-align: center; line-height: 70px; border-radius: 50%; } .status-notificatiom b { font-size: 24px; font-weight: 400; margin-top: 5px; } .status-notificatiom p { color: rgba(0, 0, 0, 0.4509803922); } .status-notificatiom .fa-triangle-exclamation { font-size: 70px; color: #ffc53d; }/*# sourceMappingURL=pc_style.css.map */