/* UX Countdown Shortcode Styles */
.ux-timer{
	width:100%;
	position:relative;
	border-spacing: 5px;
	margin: .3em 0 .2em;
	font-size: 300%;
	display: table;
  table-layout: fixed;
}
.ux-timer span{
	display:table-cell;
	font-weight: bolder;
	text-align: center;
	color:#FFF;
	line-height: 80%;
	padding: .4em .1em .1em;
	margin:0 .05em .2em;
	border-radius: 5px;
	background-color: rgba(0,0,0,.85);
}
.ux-timer span strong{
	font-family: 'Helvetica' Sans-serif;
	font-size: 30%;
	opacity: .7;
	text-transform: uppercase;
	display: block;
}
.ux-timer.light span{
	background-color: rgba(255,255,255,.85);
	color: #000;
}
.ux-timer-text span{
	font-weight: bolder;
	display: inline-block;
	margin: 0 .35em
}
.ux-timer-text strong{
	margin-left: .2em
}

.ux-timer {
    margin-top: -6px;
}
.ux-timer span{
    transform: translateX(-14px);
    width: 30px;
}
@media (min-width: 768px) {
    .ux-timer {
        margin-top: -7px;
    }
    .ux-timer span{
        transform: none;
      display: inline-block;
      width: 60px !important;
      margin-right: 8px;
    }
}

/* ======================================================= */
/* TÙY CHỈNH THU GỌN VÀ ĐỔI MÀU BỘ ĐẾM NGƯỢC FLASH SALE */
/* Giảm Chiều Cao Hộp và Kích Thước Chữ/Số */
/* ======================================================= */

/* 1. Điều chỉnh khối cha (.ux-timer) và vị trí */
.col-inner .ux-timer,
.widget-title .ux-timer, 
.section-content .ux-timer {
    font-size: 100% !important; 
    margin-top: -8px !important; /* ĐẨY KHỐI LÊN CAO: Điều chỉnh từ -10px lên -8px */
    margin-bottom: 0px !important;
}

/* 2. Điều chỉnh kích thước và màu nền của Hộp (Box) đếm ngược */
.col-inner .ux-timer span,
.col-inner .ux-timer.dark span {
    /* Đổi màu nền và viền */
    background-color: #ffffff !important; 
    border: 1px solid #e0e0e0 !important; 
    color: #333333 !important; 
    
    /* Thu gọn kích thước - THAY ĐỔI TẠI ĐÂY */
    padding: 3px 10px 0px 10px !important; /* GIẢM PADDING DỌC: 3px trên, 0px dưới */
    margin: 0 4px !important;     
    min-width: 60px !important;   
    min-height: 35px !important;  /* GIẢM min-height (35px) */
    border-radius: 5px !important;

    /* Buộc hủy các thuộc tính transform và width cứng của theme */
    transform: none !important;
    width: auto !important;
}

/* 3. Giảm kích thước Chữ (Text: Giờ, Phút, Giây) */
.col-inner .ux-timer span strong,
.col-inner .ux-timer.dark span strong {
    font-size: 9px !important; /* GIẢM FONT SIZE CHỮ (9px) */
    line-height: 1 !important;
    color: #333333 !important; 
    opacity: 1 !important; 
}

/* 4. Giảm kích thước Số đếm */
.col-inner .ux-timer span {
    font-size: 20px !important; /* GIẢM FONT SIZE SỐ (20px) */
    line-height: 1.1 !important; 
    padding-top: 3px !important; /* Điều chỉnh lại padding top hungnv*/
}

/* ======================================================= */
/* KHẮC PHỤC LỖI BỐ CỤC (3 HÀNG) VÀ CĂN GIỮA TRÊN MOBILE */
/* Sử dụng phương pháp Line-Height/Vertical-Align để duy trì bố cục ngang */
/* ======================================================= */

@media (max-width: 767px) {
    /* Khắc phục lỗi tràn ngang do chiều rộng cố định */
    .col-inner .ux-timer {
        width: 100% !important;
        margin: -5px auto 0 !important; /* Căn giữa và đẩy lên -5px */
    }

    /* Thu nhỏ kích thước và CĂN GIỮA NỘI DUNG (CHỮ VÀ SỐ) */
    .col-inner .ux-timer span,
    .col-inner .ux-timer.dark span {
        /* Đảm bảo bố cục ngang (display: table-cell) được giữ nguyên */
        display: table-cell !important;
        
        /* CĂN GIỮA CHỮ/SỐ THEO CHIỀU NGANG */
        text-align: center !important; 
        /* CĂN GIỮA CHỮ/SỐ THEO CHIỀU DỌC (cần điều chỉnh padding/height) */
        vertical-align: middle !important; 

        /* Thu nhỏ kích thước Hộp (span) trên Mobile */
        min-width: 50px !important;    /* Giảm chiều ngang */
        min-height: 45px !important;   /* Giảm chiều cao */
        padding: 5px 2px 5px 2px !important; /* Điều chỉnh padding đều 4 bên (trên/dưới: 5px) */
        margin: 0 2px !important;      /* Giảm khoảng cách giữa các hộp */
        
        width: auto !important;
    }
    
    /* 3. Thu nhỏ kích thước Số đếm */
    /* Số đếm là nội dung chính của span, cần điều chỉnh font-size chung và line-height */
    .col-inner .ux-timer span {
        font-size: 18px !important; /* Giảm kích thước số (18px) */
        line-height: 1 !important; /* Quan trọng: Đặt line-height nhỏ để căn giữa tốt hơn */
    }

    /* 4. Thu nhỏ kích thước Chữ (Text: Giờ, Phút, Giây) */
    .col-inner .ux-timer span strong,
    .col-inner .ux-timer.dark span strong {
        font-size: 8px !important; /* Giảm kích thước chữ (8px) */
        line-height: 1 !important;
        display: block !important; /* Đảm bảo chữ nằm dưới số */
        margin-top: 2px !important; /* Tạo khoảng cách nhỏ giữa số và chữ */
    }
}