*/
.tw-table-overlay thead tr,
.tw-table-overlay tfoot tr {
position: sticky;
top: 0;
/* Đặt vị trí cố định trên cùng */
z-index: 3;
/* Đảm bảo header nằm trên các cột */
background: var(--stickyBackground);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Hiệu ứng bóng */
}
/* Cố định cột */
.tw-table-overlay th.sticky,
.tw-table-overlay td.sticky {
position: sticky;
z-index: 2;
/* Cột cố định nằm dưới header */
}
/* Nền cho ô cố định */
.tw-table-overlay th.sticky {
background: var(--stickyBackground);
}
.tw-table-overlay td.sticky {
background: var(--cellBackground);
transform: translateZ(0);
will-change: transform, position;
box-shadow: inset 0 -1px 0 0 var(--borderColorTd);
}
/* Nền cho các trong hàng chẵn */
.tw-table-overlay .tw-table-odd-even tbody tr:nth-child(odd) td {
background-color: var(--oddRowCellBackground);
}
/* Nền cho các trong hàng lẻ */
.tw-table-overlay .tw-table-odd-even tbody tr:nth-child(even) td {
background-color: var(--evenRowCellBackground);
}
/* Áp dụng màu nền cho các .hovered */
.tw-table-overlay td.hovered {
background-color: var(--hoveredCellBackground);
}
.tw-table-overlay .tw-table-odd-even tbody tr:nth-child(odd) td.hovered,
.tw-table-overlay .tw-table-odd-even tbody tr:nth-child(even) td.hovered {
background-color: var(--hoveredCellEvenOddBackground);
}
/* Hiệu ứng bóng */
.tw-table-overlay th.sticky.last-sticky::after,
.tw-table-overlay td.sticky.last-sticky::after {
content: "";
position: absolute;
right: -6px;
top: 0;
bottom: -1px;
width: 5px;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.08) 0%,
rgba(0, 0, 0, 0) 100%
);
}
/* END STYLE CORE TABLE */
/*
STYLE RIÊNG CHO ADX
CODE BẰNG TAILWIND CHO NHANH
*/
.tw-table-overlay .tw-placeholder {
height: 0.625rem;
width: 100%;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(209 209 209 / var(--tw-bg-opacity));
}
.tw-table-overlay tbody tr td:has(.tw-placeholder) {
height: 3.5rem;
}
.tw-table-overlay {
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
filter: drop-shadow(0px 0px 16px rgba(64, 141, 216, 0.2));
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.12);
}
/*
.tw-table-overlay tr {
@apply h-[50px];
}
*/
.tw-table-overlay thead tr th {
border-width: 0px;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-weight: 500;
}
@media (min-width: 640px) {
.tw-table-overlay thead tr th {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
.tw-table-overlay thead tr th.col-checkbox {
width: 2.1875rem;
min-width: 2.1875rem;
max-width: 2.1875rem;
text-align: center;
}
.tw-table-overlay thead tr th.col-stt {
width: 2.8125rem;
min-width: 2.8125rem;
max-width: 2.8125rem;
text-align: center;
}
/* style khi 2 cot checkbox va stt dung canh nhau. checkbox ben trai, stt ben phai thi checkbox padding right = 1/2, stt padding left = 1/2 */
.tw-table-overlay .col-checkbox + .col-stt {
padding-left: 0.125rem;
}
@media (min-width: 640px) {
.tw-table-overlay .col-checkbox + .col-stt {
padding-left: 0.25rem;
}
}
.tw-table-overlay .col-checkbox:has(+ .col-stt) {
padding-right: 0.125rem;
}
@media (min-width: 640px) {
.tw-table-overlay .col-checkbox:has(+ .col-stt) {
padding-right: 0.25rem;
}
}
.tw-table-overlay thead tr th.col-preview {
width: 60px;
min-width: 60px;
max-width: 60px;
}
@media (min-width: 1024px) {
.tw-table-overlay thead tr th.col-preview {
width: 90px;
min-width: 90px;
max-width: 90px;
}
}
.tw-table-overlay .col-preview a,
.tw-table-overlay .col-preview .img-thumb-box {
display: inline-block;
height: 27px;
width: 48px;
}
@media (min-width: 640px) {
.tw-table-overlay .col-preview a,
.tw-table-overlay .col-preview .img-thumb-box {
height: auto;
width: auto;
}
}
.tw-table-overlay .col-preview a img,
.tw-table-overlay .col-preview .img-thumb-box img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 640px) {
.tw-table-overlay .col-preview a img,
.tw-table-overlay .col-preview .img-thumb-box img {
height: auto;
width: 100%;
-o-object-fit: scale-down;
object-fit: scale-down;
}
}
.tw-table-overlay thead tr th.col-name {
min-width: 200px;
max-width: 200px;
text-align: start;
}
@media (min-width: 640px) {
.tw-table-overlay thead tr th.col-name {
max-width: 250px;
}
}
.tw-table-overlay thead tr th.col-name-campaign {
text-align: start;
width: 160px;
min-width: 160px;
max-width: 160px;
}
@media (min-width: 480px) {
.tw-table-overlay thead tr th.col-name-campaign {
width: 200px;
min-width: 200px;
max-width: 200px;
}
}
@media (min-width: 640px) {
.tw-table-overlay thead tr th.col-name-campaign {
width: 250px;
min-width: 250px;
max-width: 250px;
}
}
.tw-table-overlay thead tr th.col-status {
width: 80px;
min-width: 80px;
max-width: 80px;
}
.tw-table-overlay thead tr th.col-location {
width: 130px;
min-width: 130px;
max-width: 130px;
text-align: center;
}
.tw-table-overlay thead tr th.col-rpt {
width: 130px;
min-width: 130px;
max-width: 130px;
text-align: end;
}
.tw-table-overlay tbody tr {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.tw-table-overlay tbody tr:hover {
--tw-bg-opacity: 1;
background-color: rgb(241 248 254 / var(--tw-bg-opacity));
}
.tw-table-overlay tbody tr td {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media (min-width: 640px) {
.tw-table-overlay tbody tr td {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
.tw-table-overlay tbody tr td.col-checkbox {
text-align: center;
}
.tw-table-overlay tbody tr td.col-stt {
text-align: center;
}
.tw-table-overlay tbody tr td.col-preview {
text-align: center;
}
.tw-table-overlay tbody tr td.col-name {
max-width: 200px;
text-align: start;
}
@media (min-width: 640px) {
.tw-table-overlay tbody tr td.col-name {
max-width: 250px;
}
}
.tw-table-overlay tbody tr td.col-name-campaign {
text-align: start;
width: 160px;
min-width: 160px;
max-width: 160px;
}
@media (min-width: 480px) {
.tw-table-overlay tbody tr td.col-name-campaign {
width: 200px;
min-width: 200px;
max-width: 200px;
}
}
@media (min-width: 640px) {
.tw-table-overlay tbody tr td.col-name-campaign {
width: 250px;
min-width: 250px;
max-width: 250px;
}
}
.tw-table-overlay tbody tr td.col-status {
text-align: center;
}
.tw-table-overlay tbody tr td.col-location {
text-align: center;
}
.tw-table-overlay tbody tr td.col-rpt {
text-align: end;
}
.tw-table-overlay tfoot tr {
border-width: 0px;
border-top-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.tw-table-overlay tfoot tr th {
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
@media (min-width: 640px) {
.tw-table-overlay tfoot tr th {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
.tw-table-overlay tfoot tr th.col-rpt {
text-align: end;
}
.tw-table-overlay thead tr th.col-region {
width: 200px;
min-width: 200px;
max-width: 200px;
text-align: end;
}
.tw-table-overlay tbody tr td.col-region {
text-align: end;
}
.tw-table-overlay tfoot tr th.col-region {
text-align: end;
}
/* set width cột theo px */
/* thead */
.tw-table-overlay thead tr th.col-60 {
width: 60px;
min-width: 60px;
max-width: 60px;
text-align: start;
}
.tw-table-overlay thead tr th.col-80 {
width: 80px;
min-width: 80px;
max-width: 80px;
text-align: start;
}
.tw-table-overlay thead tr th.col-100 {
width: 100px;
min-width: 100px;
max-width: 100px;
text-align: start;
}
.tw-table-overlay thead tr th.col-120 {
width: 120px;
min-width: 120px;
max-width: 120px;
text-align: start;
}
.tw-table-overlay thead tr th.col-140 {
width: 140px;
min-width: 140px;
max-width: 140px;
text-align: start;
}
.tw-table-overlay thead tr th.col-160 {
width: 160px;
min-width: 160px;
max-width: 160px;
text-align: start;
}
.tw-table-overlay thead tr th.col-180 {
width: 180px;
min-width: 180px;
max-width: 180px;
text-align: start;
}
.tw-table-overlay thead tr th.col-200 {
width: 200px;
min-width: 200px;
max-width: 200px;
text-align: start;
}
.tw-table-overlay thead tr th.col-250 {
width: 250px;
min-width: 250px;
max-width: 250px;
text-align: start;
}
.tw-table-overlay thead tr th.col-300 {
width: 300px;
min-width: 300px;
max-width: 300px;
text-align: start;
}
/* tbody */
.tw-table-overlay tbody tr td.col-60 {
width: 60px;
min-width: 60px;
max-width: 60px;
text-align: start;
}
.tw-table-overlay thead tr td.col-80 {
width: 80px;
min-width: 80px;
max-width: 80px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-100 {
width: 100px;
min-width: 100px;
max-width: 100px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-120 {
width: 120px;
min-width: 120px;
max-width: 120px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-140 {
width: 140px;
min-width: 140px;
max-width: 140px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-160 {
width: 160px;
min-width: 160px;
max-width: 160px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-180 {
width: 180px;
min-width: 180px;
max-width: 180px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-200 {
width: 200px;
min-width: 200px;
max-width: 200px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-250 {
width: 250px;
min-width: 250px;
max-width: 250px;
text-align: start;
}
.tw-table-overlay tbody tr td.col-300 {
width: 300px;
min-width: 300px;
max-width: 300px;
text-align: start;
}
/* footer */
.tw-table-overlay thead tr th.col-60 {
width: 60px;
min-width: 60px;
max-width: 60px;
text-align: start;
}
.tw-table-overlay thead tr th.col-80 {
width: 80px;
min-width: 80px;
max-width: 80px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-100 {
width: 100px;
min-width: 100px;
max-width: 100px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-120 {
width: 120px;
min-width: 120px;
max-width: 120px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-140 {
width: 140px;
min-width: 140px;
max-width: 140px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-160 {
width: 160px;
min-width: 160px;
max-width: 160px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-180 {
width: 180px;
min-width: 180px;
max-width: 180px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-200 {
width: 200px;
min-width: 200px;
max-width: 200px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-250 {
width: 250px;
min-width: 250px;
max-width: 250px;
text-align: start;
}
.tw-table-overlay tfoot tr th.col-300 {
width: 300px;
min-width: 300px;
max-width: 300px;
text-align: start;
}
/* STYLE RIÊNG */
.tw-table-control-overlay {
overflow-x: auto;
overflow-y: hidden;
}
.tw-table-control-overlay table {
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(138 196 239 / var(--tw-border-opacity));
}
.tw-table-control-overlay thead tr th {
--tw-bg-opacity: 1;
background-color: rgb(227 238 251 / var(--tw-bg-opacity));
border-width: 0px;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(138 196 239 / var(--tw-border-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.tw-table-control-overlay thead tr th.col-100 {
width: 100px;
min-width: 100px;
max-width: 100px;
}
.tw-table-control-overlay thead tr th.col-150 {
width: 150px;
min-width: 150px;
max-width: 150px;
}
.tw-table-control-overlay thead tr th.col-200 {
width: 200px;
min-width: 200px;
max-width: 200px;
}
.tw-table-control-overlay thead tr th.col-250 {
width: 250px;
min-width: 250px;
max-width: 250px;
}
.tw-table-control-overlay thead tr th.col-300 {
width: 300px;
min-width: 300px;
max-width: 300px;
}
.tw-table-control-overlay tbody tr td {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
@media (min-width: 1024px) {
.tw-table-control-overlay tbody tr td {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
/* MODAL */
/* Basic styling for modal */
.modal {
display: none;
/* Hidden by default */
position: fixed;
z-index: 9999;
/* Ensure the modal is on top of all other elements */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Black with opacity */
transition: opacity 0.3s ease;
opacity: 0;
justify-content: center;
align-items: center;
}
/* Modal visible */
.modal.show {
display: flex;
opacity: 1;
}
/* Modal content */
.modal .modal-content {
background-color: white;
border: 1px solid #4ba6e5;
/*border-ax-blue-400*/
position: relative;
transition: transform 0.3s ease-in-out;
transform: translateY(-20px);
border-radius: 10px;
/* Bo tròn góc của modal */
overflow: hidden;
max-height: 95vh;
display: flex;
flex-direction: column;
}
/* Modal content visible */
.modal.show .modal-content {
transform: translateY(0);
}
/* Modal header */
.modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #4ba6e5;
/*border-ax-blue-400*/
background-color: #c1def6;
/*bg-ax-blue-200*/
}
.modal .modal-header .modal-title {
font-weight: 700;
}
/* Modal body */
.modal .modal-body {
padding: 15px 20px;
height: auto;
/* Chiều cao tự động để điều chỉnh nội dung */
overflow: auto;
/* Thêm thanh cuộn */
}
/* Modal footer */
.modal .modal-footer {
display: flex;
align-items: center;
gap: 16px;
justify-content: flex-end;
padding: 15px 20px;
border-top: 1px solid #4ba6e5;
/*border-ax-blue-400*/
background-color: #c1def6;
/*bg-ax-blue-200*/
}
/* Close button */
.modal .close::after {
content: "✕";
color: #666666;
/*text-ax-gray-500*/
font-size: 20px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
}
.modal .close:hover::after {
color: #3d3d3d;
/*text-ax-gray-900*/
}
.modal .close:hover,
.modal .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal sizes */
.modal-sm .modal-content {
width: 50%;
max-width: 400px;
}
.modal-md .modal-content {
width: 70%;
max-width: 600px;
}
.modal-lg .modal-content {
width: 90%;
max-width: 800px;
}
.modal-xl .modal-content {
width: 90%;
max-width: 1200px;
}
/* Mobile responsiveness: Ensure modals are 95% width on small screens */
@media (max-width: 767px) {
.modal-content,
.modal-sm .modal-content,
.modal-md .modal-content,
.modal-lg .modal-content,
.modal-xl .modal-content {
width: 95%;
/* Modal width on mobile */
max-height: 70%;
/* Modal height on mobile */
}
}
body.is-open-modal {
overflow: hidden;
/* Disable scrolling */
}
/* END MODAL */
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/*
! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
body {
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(26 26 26 / var(--tw-text-opacity));
font-family: Roboto, sans-serif;
}
/* ✅ Thanh cuộn
phải nằm giữa @tailwind base;và @tailwind components;
*/
* {
scrollbar-width: thin;
scroll-behavior: smooth;
scrollbar-color: transparent transparent;
/* cuộn mặc định ẩn*/
}
*:hover {
scrollbar-color: #969696 transparent;
/* cuộn hiện khi hover*/
}
/* End thanh cuộn */
/* ✅ button
DEMO
Button
Button
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: stretch;
line-height: 1.5;
border-radius: 0.375rem;
/* @apply px-3.5 py-2.5; */
/* TODO: */
padding-left: 0.85rem;
padding-right: 0.85rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(204 204 204 / var(--tw-border-opacity));
}
.btn:hover {
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}
.btn {
text-wrap: nowrap;
text-align: center;
font-weight: 500;
font-size: inherit;
cursor: pointer;
}
.btn.btn-square {
padding-left: 0.625rem;
padding-right: 0.625rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.btn.btn-img {
height: 2.6875rem;
}
.btn.btn-img img {
max-height: 100%;
}
.btn.btn-square.btn-img img {
height: 100%;
width: 100%;
}
.btn.btn-img {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.btn.btn-square.btn-img {
padding: 0.5rem !important;
}
.btn-sm {
/* @apply px-3 py-2 text-sm; */
/* TODO: */
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.btn.btn-sm.btn-square {
/* @apply px-2 py-2; */
/* TODO: */
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.btn-sm.btn-img {
height: 2.375rem;
}
.btn-md {
/* @apply text-base px-4.5 py-3.5; */
/* TODO: */
padding-left: 1.125rem;
padding-right: 1.125rem;
font-size: 1rem;
line-height: 1.5rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.btn-md.btn-square {
/* @apply px-3.5 py-3.5; */
/* TODO: */
padding-left: 0.875rem;
padding-right: 0.875rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.btn.btn-md.btn-img {
height: 3.375rem;
/* @apply py-3 !important; */
/* TODO: */
padding-top: 0.875rem !important;
padding-bottom: 0.875rem !important;
}
.btn.btn-md.btn-square.btn-img {
/* @apply p-3 !important; */
/* TODO: */
padding-left: 1.125rem !important;
padding-right: 1.125rem !important;
padding-top: 0.875rem !important;
padding-bottom: 0.875rem !important;
}
.btn-lg {
/* @apply text-lg px-7 py-5; */
/* TODO: */
padding-left: 1.75rem;
padding-right: 1.75rem;
font-size: 1.125rem;
line-height: 1.75rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.btn-lg.btn-square {
/* @apply px-5 py-5; */
/* TODO: */
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.btn.btn-lg.btn-img {
/* TODO: */
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.btn.btn-lg.btn-square.btn-img {
/* TODO: */
padding: 1rem !important;
}
.btn.btn-lg.btn-img {
height: 4.375rem;
}
.btn-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(61 61 61 / var(--tw-text-opacity));
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.btn-white:hover {
--tw-border-opacity: 1;
border-color: rgb(246 246 246 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(19 87 145 / var(--tw-text-opacity));
}
.btn-dark {
--tw-bg-opacity: 1;
background-color: rgb(69 69 69 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
--tw-border-opacity: 1;
border-color: rgb(69 69 69 / var(--tw-border-opacity));
}
.btn-dark:hover {
--tw-border-opacity: 1;
border-color: rgb(69 69 69 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(61 61 61 / var(--tw-bg-opacity));
}
.btn-light {
--tw-border-opacity: 1;
border-color: rgb(237 237 237 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(247 247 247 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(61 61 61 / var(--tw-text-opacity));
}
.btn-light:hover {
--tw-border-opacity: 1;
border-color: rgb(223 223 223 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(223 223 223 / var(--tw-bg-opacity));
}
.btn-blue {
--tw-bg-opacity: 1;
background-color: rgb(53 151 221 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
}
.btn-blue:hover {
--tw-border-opacity: 1;
border-color: rgb(21 109 180 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(21 109 180 / var(--tw-bg-opacity));
}
.btn-blue-outline {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(53 151 221 / var(--tw-text-opacity));
}
.btn-blue-outline:hover {
--tw-border-opacity: 1;
border-color: rgb(21 109 180 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(21 109 180 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-green {
--tw-border-opacity: 1;
border-color: rgb(35 162 63 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(35 162 63 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-green:hover {
--tw-border-opacity: 1;
border-color: rgb(28 95 43 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(28 95 43 / var(--tw-bg-opacity));
}
.btn-green-outline {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(35 162 63 / var(--tw-border-opacity));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(35 162 63 / var(--tw-text-opacity));
}
.btn-green-outline:hover {
--tw-border-opacity: 1;
border-color: rgb(47 184 77 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(47 184 77 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-red {
--tw-border-opacity: 1;
border-color: rgb(237 32 21 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(237 32 21 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-red:hover {
--tw-border-opacity: 1;
border-color: rgb(165 23 15 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(165 23 15 / var(--tw-bg-opacity));
}
.btn-red-outline {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(237 32 21 / var(--tw-border-opacity));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(237 32 21 / var(--tw-text-opacity));
}
.btn-red-outline:hover {
--tw-border-opacity: 1;
border-color: rgb(165 23 15 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(165 23 15 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-yellow {
--tw-border-opacity: 1;
border-color: rgb(252 175 23 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(252 175 23 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-yellow:hover {
--tw-border-opacity: 1;
border-color: rgb(246 145 10 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(246 145 10 / var(--tw-bg-opacity));
}
.btn-yellow-outline {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(252 175 23 / var(--tw-border-opacity));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(246 145 10 / var(--tw-text-opacity));
}
.btn-yellow-outline:hover {
--tw-border-opacity: 1;
border-color: rgb(246 145 10 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(246 145 10 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-img.btn-blue-outline:hover,
.btn-img.btn-yellow-outline:hover,
.btn-img.btn-red-outline:hover,
.btn-img.btn-green-outline:hover {
--tw-bg-opacity: 1;
background-color: rgb(241 248 254 / var(--tw-bg-opacity));
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-shadow-color: #c1def6;
--tw-shadow: var(--tw-shadow-colored);
}
.btn-text {
border-style: none;
}
/* end button */
/* ✅ input
DEMO
*/
.input-group {
position: relative;
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: stretch;
cursor: pointer;
}
.input-group > .input-icon {
display: flex;
align-items: center;
border-radius: 0.375rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
--tw-text-opacity: 1;
color: rgb(69 69 69 / var(--tw-text-opacity));
}
.input-group > .input-icon:not(:first-child):not(:last-child),
.input-group > .input:not(:first-child):not(:last-child) {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.input-group > .input-icon:not(:first-child):is(:last-child),
.input-group > .input:not(:first-child):is(:last-child) {
padding-left: 0.375rem;
}
.input-group > .input-icon:is(:first-child):not(:last-child),
.input-group > .input:is(:first-child):not(:last-child) {
padding-right: 0.375rem;
}
.input-group.input-group-sm > .input-icon {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.input-group.input-group-sm > .input-icon:not(:first-child):not(:last-child),
.input-group.input-group-sm > .input:not(:first-child):not(:last-child) {
padding-left: 0.25rem;
padding-right: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input-group.input-group-sm > .input-icon:not(:first-child):is(:last-child),
.input-group.input-group-sm > .input:not(:first-child):is(:last-child) {
padding-left: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input-group.input-group-sm > .input-icon:is(:first-child):not(:last-child),
.input-group.input-group-sm > .input:is(:first-child):not(:last-child) {
padding-right: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.input-group.input-group-md > .input-icon {
padding-left: 1rem;
padding-right: 1rem;
}
.input-group.input-group-md > .input-icon:not(:first-child):not(:last-child),
.input-group.input-group-md > .input:not(:first-child):not(:last-child) {
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
.input-group.input-group-md > .input-icon:not(:first-child):is(:last-child),
.input-group.input-group-md > .input:not(:first-child):is(:last-child) {
padding-left: 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
.input-group.input-group-md > .input-icon:is(:first-child):not(:last-child),
.input-group.input-group-md > .input:is(:first-child):not(:last-child) {
padding-right: 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
.input-group.input-group-lg > .input-icon {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.input-group.input-group-lg > .input-icon:not(:first-child):not(:last-child),
.input-group.input-group-lg > .input:not(:first-child):not(:last-child) {
padding-left: 0.625rem;
padding-right: 0.625rem;
font-size: 1.125rem;
line-height: 1.75rem;
}
.input-group.input-group-lg > .input-icon:not(:first-child):is(:last-child),
.input-group.input-group-lg > .input:not(:first-child):is(:last-child) {
padding-left: 0.625rem;
font-size: 1.125rem;
line-height: 1.75rem;
}
.input-group.input-group-lg > .input-icon:is(:first-child):not(:last-child),
.input-group.input-group-lg > .input:is(:first-child):not(:last-child) {
padding-right: 0.625rem;
font-size: 1.125rem;
line-height: 1.75rem;
}
.input-group > .input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.input-group > .input:focus {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.input-group > .input {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group > :not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > :not(:first-child):not(:last-child) {
border-right: 0;
border-left: 0;
}
.input-group > :not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > :is(:first-child):not(:last-child) {
border-right: 0;
}
.input-group > :is(:last-child):not(:first-child) {
border-left: 0;
}
.input-group:focus-within .input,
.input-group:focus-within .input-icon {
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
}
/* end input */
/* ✅ checkbox
DEMO
1
1
*/
.select {
border-radius: 0.375rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
--tw-text-opacity: 1;
color: rgb(69 69 69 / var(--tw-text-opacity));
display: block;
width: 100%;
}
.select:focus {
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.select {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
/* @apply pl-4 pr-6; TODO: */
/* @apply pt-[13px] pb-[12px]; TODO:*/
padding-left: 0.85rem;
padding-right: 0.85rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
line-height: 1.5;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg==");
background-size: 0.7rem;
background-position: right 0.7rem center;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-sm {
/* @apply pl-3 pr-6 text-sm; TODO: */
/* @apply pt-2 pb-2; TODO:*/
font-size: 0.875rem;
line-height: 1.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.select-md {
/* @apply text-base pl-4 pr-6; TODO: */
/* @apply py-3.5; TODO:*/
font-size: 1rem;
line-height: 1.5rem;
padding-left: 1.125rem;
padding-right: 1.125rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.select-lg {
/* @apply text-lg pl-7 pr-9; TODO: */
/* @apply pt-5 pb-5; */
font-size: 1.125rem;
line-height: 1.75rem;
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
/* end select option */
/* ✅ tooltip */
.tw-tooltip {
position: absolute;
white-space: normal;
border-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
z-index: 50;
max-width: 300px;
opacity: 0;
--tw-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
--tw-shadow-colored: 0 8px 16px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px) {
.tw-tooltip {
max-width: 500px;
}
}
.tw-tooltip {
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
transform: translateY(10px);
}
.tw-tooltip.show {
opacity: 1;
transform: translateY(0);
}
.tw-tooltip .tw-tooltip-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
font-weight: 700;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(176 176 176 / var(--tw-border-opacity));
}
.tw-tooltip .tw-tooltip-content {
pointer-events: none;
overflow-wrap: break-word;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
}
/* end tooltip */
/* ✅ breadcrumb
DEMO
*/
.breadcrumb {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.breadcrumb .home img {
max-height: 24px;
}
.breadcrumb .item {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(102 102 102 / var(--tw-text-opacity));
}
.breadcrumb .item:hover {
--tw-text-opacity: 1;
color: rgb(53 151 221 / var(--tw-text-opacity));
}
.breadcrumb .item.active {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(136 136 136 / var(--tw-text-opacity));
}
.breadcrumb .item.active:hover {
--tw-text-opacity: 1;
color: rgb(136 136 136 / var(--tw-text-opacity));
}
.breadcrumb .item:not(:last-child)::after {
margin-left: 0.75rem;
--tw-content: '/';
content: var(--tw-content);
}
/* end breadcrumb */
/* ✅ Tiêu đề page */
.page-title {
overflow-wrap: break-word;
font-weight: 500;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
font-size: 20px;
line-height: 1.5rem;
}
@media (min-width: 1024px) {
.page-title {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
font-size: 26px;
line-height: 2.5rem;
}
}
.report-title {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 500;
}
@media (min-width: 1024px) {
.report-title {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
}
/* end tiêu đề page */
/* ✅ popup */
.tw-popup-overlay {
position: absolute;
z-index: 10;
}
.tw-popup-overlay::after {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(193 222 246 / var(--tw-bg-opacity));
}
.tw-arrow-left::after {
position: absolute;
left: 45px;
top: -5px;
height: 10px;
width: 10px;
--tw-content: '';
content: var(--tw-content);
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-top-width: 1px;
border-left-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.tw-arrow-right::after {
position: absolute;
right: 45px;
top: -5px;
height: 10px;
width: 10px;
--tw-content: '';
content: var(--tw-content);
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-top-width: 1px;
border-left-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.tw-popup {
border-radius: 0.5rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px) {
.tw-popup {
--tw-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
--tw-shadow-colored: 0 8px 16px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
}
@media screen and (max-width: 768px) {
/* Popup trên mobile */
.tw-popup-overlay {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
--tw-bg-opacity: 0.7;
}
}
.tw-popup {
max-width: 98%;
overflow: hidden;
}
@media (min-width: 768px) {
.tw-popup {
max-width: 85vw;
}
}
@media (min-width: 1024px) {
.tw-popup {
max-width: 900px;
}
}
.tw-popup-sm {
width: 100%;
}
@media (min-width: 1024px) {
.tw-popup-sm {
width: 300px;
min-width: 300px;
max-width: 300px;
}
}
.tw-popup-md {
width: 100%;
}
@media (min-width: 1024px) {
.tw-popup-md {
width: 500px;
min-width: 500px;
max-width: 500px;
}
}
.tw-popup-lg {
width: 100%;
}
@media (min-width: 1024px) {
.tw-popup-lg {
width: 700px;
min-width: 700px;
max-width: 700px;
}
}
.tw-popup-xxl {
width: 100%;
}
@media (min-width: 1024px) {
.tw-popup-xxl {
width: 900px;
min-width: 900px;
max-width: 900px;
}
}
.tw-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(75 166 229 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(193 222 246 / var(--tw-bg-opacity));
}
.tw-popup-header-title {
font-weight: 700;
}
.tw-popup-header-close {
cursor: pointer;
}
.tw-popup-header-close::after {
display: flex;
align-items: center;
cursor: pointer;
font-size: 20px;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(176 176 176 / var(--tw-text-opacity));
content: "✕";
}
.tw-popup-header-close:hover::after {
--tw-text-opacity: 1;
color: rgb(61 61 61 / var(--tw-text-opacity));
}
.tw-popup-body {
max-height: 70vh;
overflow-x: auto;
overflow-y: auto;
}
@media (min-width: 1024px) {
.tw-popup-body {
max-height: 500px;
}
}
.tw-popup-body {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.tw-popup-footer {
border-top-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(75 166 229 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(193 222 246 / var(--tw-bg-opacity));
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* popup có nền và viền màu xám */
.tw-popup-overlay.style-gray::after {
--tw-bg-opacity: 1;
background-color: rgb(231 231 231 / var(--tw-bg-opacity));
}
.tw-popup-overlay.style-gray.tw-arrow-left::after,
.tw-popup-overlay.style-gray.tw-arrow-right::after {
border-top-width: 1px;
border-left-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(176 176 176 / var(--tw-border-opacity));
}
.tw-popup-overlay.style-gray .tw-popup {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 209 209 / var(--tw-border-opacity));
}
.tw-popup-overlay.style-gray .tw-popup-header {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 209 209 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(231 231 231 / var(--tw-bg-opacity));
}
.tw-popup-overlay.style-gray .tw-popup-footer {
border-top-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 209 209 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(231 231 231 / var(--tw-bg-opacity));
}
/* end popup có nền và viền màu xám */
/* end popup */
/* ✅ filter */
.filter-bar {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.25rem;
}
@media (min-width: 768px) {
.filter-bar {
grid-template-columns: 1fr 300px;
gap: 0.75rem;
}
}
.filter-bar-left .filter-box {
display: flex;
height: 100%;
min-height: 43px;
align-items: center;
justify-content: space-between;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-shadow-color: #e3eefb;
--tw-shadow: var(--tw-shadow-colored);
cursor: pointer;
}
.filter-dropdown__body__left .has-right-filter {
cursor: pointer;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-dropdown__body__left .has-right-filter:hover {
--tw-bg-opacity: 1;
background-color: rgb(227 238 251 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(53 151 221 / var(--tw-text-opacity));
}
.filter-dropdown__body__left .has-right-filter {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.filter-dropdown__body__left .has-right-filter .arrow {
--tw-text-opacity: 1;
color: rgb(102 102 102 / var(--tw-text-opacity));
}
.filter-dropdown__body__left .has-right-filter.active {
--tw-bg-opacity: 1;
background-color: rgb(227 238 251 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(53 151 221 / var(--tw-text-opacity));
}
.filter-dropdown__body__left .has-right-filter.active .arrow {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-text-opacity: 1;
color: rgb(53 151 221 / var(--tw-text-opacity));
}
/* end filter */
/* ✅ paging
DEMO
*/
.pager {
display: flex;
align-items: center;
gap: 0.25rem;
justify-content: center;
}
@media (min-width: 768px) {
.pager {
justify-content: flex-end;
}
}
.pager .list-page {
display: flex;
justify-content: flex-start;
}
@media (min-width: 768px) {
.pager .list-page {
justify-content: flex-end;
}
}
.pager .list-page {
overflow-x: auto;
}
.pager .pager-item {
margin-right: 5px;
text-wrap: nowrap;
border-radius: 0.375rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(231 231 231 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.875rem;
padding-bottom: 0.6875rem;
text-align: center;
vertical-align: middle;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 1;
cursor: pointer;
}
.pager .pager-item:hover {
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(53 151 221 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.pager .pager-item.active,
.pager .pager-item.active:hover {
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(53 151 221 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.pager .row-page {
width: 100px;
}
.pager .row-page .select {
height: 41px;
--tw-border-opacity: 1;
border-color: rgb(231 231 231 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
transition-property: none;
}
.pager .row-page .select:focus {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px;
}
.pager .row-page .select {
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 1;
}
/* end paging */
/* chart */
.chart-overlay {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.chart-overlay .chart-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.375rem;
}
@media (min-width: 640px) {
.chart-overlay .chart-header {
gap: 0.5rem;
}
}
@media (min-width: 768px) {
.chart-overlay .chart-header {
gap: 0.625rem;
}
}
@media (min-width: 1024px) {
.chart-overlay .chart-header {
gap: 0.75rem;
}
}
.chart-overlay .chart-header {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 209 209 / var(--tw-border-opacity));
}
.chart-overlay .chart-search-camp {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 0.5rem;
}
@media (min-width: 1024px) {
.chart-overlay .chart-search-camp {
justify-content: flex-end;
}
}
.chart-overlay .chart-search-camp {
margin-left: 0.5rem;
margin-right: 0.5rem;
margin-top: 0.625rem;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.chart-overlay .chart-search-camp {
margin-left: 1.25rem;
margin-right: 1.25rem;
margin-top: 0px;
margin-bottom: 0px;
}
}
.chart-overlay .chart-search-camp {
width: 100%;
}
@media (min-width: 768px) {
.chart-overlay .chart-search-camp {
width: 400px;
}
}
.chart-overlay .btn-title-graph-group {
display: flex;
gap: 0.5rem;
}
@media (min-width: 1024px) {
.chart-overlay .btn-title-graph-group {
gap: 1rem;
}
}
.chart-overlay .btn-title-graph {
height: auto;
border-width: 0px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
@media (min-width: 768px) {
.chart-overlay .btn-title-graph {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
}
.chart-overlay .btn-title-graph {
width: auto;
text-align: center;
}
@media (min-width: 768px) {
.chart-overlay .btn-title-graph {
min-width: 120px;
}
}
.chart-overlay .btn-title-graph span {
font-size: 15px;
font-weight: 500;
line-height: 1.5;
--tw-text-opacity: 1;
color: rgb(102 102 102 / var(--tw-text-opacity));
}
.chart-overlay .btn-title-graph.active-graph-cp {
box-shadow: inset 0px -3px 0px #fcaf17;
-webkit-box-shadow: inset 0px -3px 0px #fcaf17;
-moz-box-shadow: inset 0px -3px 0px #fcaf17;
}
.chart-overlay .btn-title-graph.active-graph-cp span {
font-weight: 500;
color: #fcaf17;
}
.chart-overlay .but-select-graph {
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
--tw-text-opacity: 1;
color: rgb(136 136 136 / var(--tw-text-opacity));
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 209 209 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.chart-overlay .but-select-graph.active-dropdown-graph {
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
}
.chart-overlay .but-apply-graph {
display: inline-flex;
align-items: center;
justify-content: stretch;
line-height: 1.5;
border-radius: 0.375rem;
/* @apply px-3.5 py-2.5; */
/* TODO: */
padding-left: 0.85rem;
padding-right: 0.85rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(204 204 204 / var(--tw-border-opacity));
}
.chart-overlay .but-apply-graph:hover {
--tw-bg-opacity: 1;
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}
.chart-overlay .but-apply-graph {
text-wrap: nowrap;
text-align: center;
font-weight: 500;
font-size: inherit;
cursor: pointer;
}
.chart-overlay .but-apply-graph.btn-square {
padding-left: 0.625rem;
padding-right: 0.625rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.chart-overlay .but-apply-graph.btn-img {
height: 2.6875rem;
}
.chart-overlay .but-apply-graph.btn-img img {
max-height: 100%;
}
.chart-overlay .but-apply-graph.btn-square.btn-img img {
height: 100%;
width: 100%;
}
.chart-overlay .but-apply-graph.btn-img {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.chart-overlay .but-apply-graph.btn-square.btn-img {
padding: 0.5rem !important;
}
.chart-overlay .but-apply-graph {
/* @apply px-3 py-2 text-sm; */
/* TODO: */
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.chart-overlay .but-apply-graph.btn-sm.btn-square {
/* @apply px-2 py-2; */
/* TODO: */
}
.btn.chart-overlay .but-apply-graph.btn-square {
/* @apply px-2 py-2; */
/* TODO: */
}
.chart-overlay .but-apply-graph.btn-sm.btn-square {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.btn.chart-overlay .but-apply-graph.btn-square {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.chart-overlay .but-apply-graph.btn-img {
height: 2.375rem;
}
.chart-overlay .but-apply-graph.btn-md.btn-img {
height: 3.375rem;
/* @apply py-3 !important; */
/* TODO: */
padding-top: 0.875rem !important;
padding-bottom: 0.875rem !important;
}
.chart-overlay .but-apply-graph.btn-md.btn-square.btn-img {
/* @apply p-3 !important; */
/* TODO: */
padding-left: 1.125rem !important;
padding-right: 1.125rem !important;
padding-top: 0.875rem !important;
padding-bottom: 0.875rem !important;
}
.chart-overlay .but-apply-graph.btn-lg.btn-img {
/* TODO: */
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.chart-overlay .but-apply-graph.btn-lg.btn-square.btn-img {
/* TODO: */
padding: 1rem !important;
}
.chart-overlay .but-apply-graph.btn-lg.btn-img {
height: 4.375rem;
}
.chart-overlay .but-apply-graph {
--tw-bg-opacity: 1;
background-color: rgb(53 151 221 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(53 151 221 / var(--tw-border-opacity));
}
.chart-overlay .but-apply-graph:hover {
--tw-border-opacity: 1;
border-color: rgb(21 109 180 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(21 109 180 / var(--tw-bg-opacity));
}
.chart-overlay .cb-graph-campaign {
display: flex;
width: 100%;
flex-direction: column;
height: 300px;
overflow-y: auto;
}
.chart-overlay #drop-sl-graph-campaign {
top: 2.5rem;
z-index: 10;
width: 100%;
border-radius: 0.5rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 209 209 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
--tw-shadow-colored: 0 8px 16px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.chart-overlay #drop-sl-graph-campaign .item {
display: flex;
cursor: pointer;
justify-content: space-between;
gap: 1.25rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.chart-overlay #drop-sl-graph-campaign .item:hover {
--tw-bg-opacity: 1;
background-color: rgb(227 238 251 / var(--tw-bg-opacity));
}
.chart-overlay .search-graph-campaign {
padding: 0.75rem;
}
.chart-overlay .graph-detail {
padding-left: 0px;
padding-right: 0px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media (min-width: 768px) {
.chart-overlay .graph-detail {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
@media (min-width: 1024px) {
.chart-overlay .graph-detail {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
}
/* end chart */
/* ✅ Badge
DEMO
