/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ==========================================================================
   MINI TAILWIND CSS FOR WORDPRESS THEME CHILD
   ========================================================================== */

/* 1. BORDER RADIUS (BO GÓC) */
.rounded-sm  { border-radius: 2px !important; overflow: hidden; }
.rounded     { border-radius: 4px !important; overflow: hidden; }
.rounded-md  { border-radius: 6px !important; overflow: hidden; }
.rounded-lg  { border-radius: 8px !important; overflow: hidden; }
.rounded-xl  { border-radius: 12px !important; overflow: hidden; }
.rounded-2xl { border-radius: 16px !important; overflow: hidden; }
.rounded-3xl { border-radius: 24px !important; overflow: hidden; }
.rounded-full{ border-radius: 9999px !important; overflow: hidden; }

/* 2. FLEXBOX & ALIGNMENT */
.flex           { display: flex !important; }
.inline-flex    { display: inline-flex !important; }
.flex-col       { flex-direction: column !important; }
.flex-wrap      { flex-wrap: wrap !important; }
.flex-1         { flex: 1 1 0% !important; }
.flex-none      { flex: none !important; }

.items-start    { align-items: flex-start !important; }
.items-center   { align-items: center !important; }
.items-end      { align-items: flex-end !important; }

.justify-start  { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end    { justify-content: flex-end !important; }
.justify-between{ justify-content: space-between !important; }

/* 3. GAP (KHOẢNG CÁCH GIỮA CÁC PHẦN TỬ FLEX) */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 20px !important; }
.gap-6 { gap: 24px !important; }
.gap-8 { gap: 32px !important; }

/* 4. TEXT ALIGN & TEXT TRANSFORM */
.text-left     { text-align: left !important; }
.text-center   { text-align: center !important; }
.text-right    { text-align: right !important; }
.text-justify  { text-align: justify !important; }
.uppercase     { text-transform: uppercase !important; }
.lowercase     { text-transform: lowercase !important; }
.capitalize    { text-transform: capitalize !important; }
.normal-case   { text-transform: none !important; }

/* 5. FONT WEIGHT (ĐỘ DÀY CHỮ) */
.font-light    { font-weight: 300 !important; }
.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }
.font-extrabold{ font-weight: 800 !important; }

/* 6. MARGIN & PADDING CƠ BẢN (SPACING) */
.m-0  { margin: 0 !important; }
.mt-2 { margin-top: 8px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-6 { margin-top: 24px !important; } /* 1.5rem */
.mt-8 { margin-top: 32px !important; } /* 2rem */
.mt-10 { margin-top: 40px !important; } /* 2.5rem */
.mt-4 { margin-top: 16px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-6 { margin-bottom: 24px !important; }
.mb-8 { margin-bottom: 32px !important; }
.mb-10 { margin-bottom: 40px !important; }

.p-0  { padding: 0 !important; }
.p-2  { padding: 8px !important; }
.p-4  { padding: 16px !important; }

/* 7. EFFECTS (HIỆU ỨNG ĐỔ BÓNG & CHUYỂN ĐỘNG) */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow    { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }

.transition-all { transition: all 0.2s ease-in-out !important; }
.duration-300   { transition-duration: 300ms !important; }

/* 8. POINTER EVENTS & CURSOR */
.cursor-pointer { cursor: pointer !important; }
.select-none    { user-select: none !important; }

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}