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

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
    --base-color: #1a1a1a;
}

.color-primary{
    color: var(--primary-color);
}
.color-secondary{
    color: var(--fs-color-secondary);
}
.color-success{
    color: var(--fs-color-success);
}
.color-alert{
    color: var(--fs-color-alert);
}
.color-link{
    color: var(--fs-experimental-link-color);
}
.color-link:hover{
    color: var(--fs-experimental-link-color-hover);
}
.bg-primary{
    background-color: var(--primary-color);
}
.bg-secondary{
    background-color: var(--fs-color-secondary);
}
.bg-success{
    background-color: var(--fs-color-success);
}
.bg-alert{
    background-color: var(--fs-color-alert);
}
.bg-link{
    background-color: var(--fs-experimental-link-color);
}
.color-base{
    color: var(--base-color);
}
.bg-base{
    background-color: var(--base-color);
}
.nav-column>li>a,
.nav-dropdown>li>a,
.nav-vertical-fly-out>li>a,
.nav>li>a,
.header-button-1 a{
	font-size: 1rem;
/* 	letter-spacing: -0.35px; */
    color: var(--primary-color);
}
.nav-column>li:hover>a,
.nav-dropdown>li:hover>a,
.nav-vertical-fly-out>li:hover>a,
.nav>li:hover>a {
    color: var(--fs-color-secondary);
}
.ux-timer span{
	
	color:var(--primary-color) !important;
	background-color: #fff !important;
}
	
/* Inherit trực tiếp từ body */
.text-inherit ,
.text-inherit p{
  color: currentColor !important;
}
.pre-footer .col-inner{
    display: flex;
    justify-content: center;
}
.plain:has(.pre-footer-icon){
    /*width: 25%;*/
    margin-left: calc(var(--bs-spacer) * 0.25) !important;
    margin-right: calc(var(--bs-spacer) * 0.25) !important;
}
.icon-box-icon-circle-base{
    border-radius: 50%;
    border: 1px solid var(--base-color);
    padding: 4px;
    display: flex;
    align-content: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    .icon-box-icon{
        display: flex;
    align-content: center;
    align-items: center;
    }
    .icon-box-text{
        display: none;
    }
}
.icon-box-icon-circle{
    /* CSS để làm hình ảnh hiển thị dạng hình tròn */
    .icon-box-img {
      width: 60px;
      height: 60px; /* Đảm bảo chiều cao bằng chiều rộng để tạo khung tròn */
      overflow: hidden; /* Cắt bỏ phần hình ảnh thừa ra ngoài khung tròn */
      border-radius: 50%; /* Tạo khung hình tròn */
    }
    
    .icon {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .icon-inner {
      width: 100%;
      height: 100%;
    }
    
    .icon-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Đảm bảo hình ảnh vừa khung và không bị méo */
      border-radius: 50%; /* Đảm bảo hình ảnh hiển thị tròn */
      padding-top: 0; /* Giữ nguyên thuộc tính từ inline style */
    }
}
.header-language .image-icon img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0.5;
	object-fit: cover;
}

.header-language .current-lang .image-icon img {
    opacity: 1;
	
}
.small-order-ltr{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.small-order-1{
	order: 1;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-order: 1;
}
.small-order-2{
	order: 2;
	-webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-order: 2;
	
}
	
.conference-documents-page {
/*     max-width: 1200px; */
    margin: 0 auto;
/*     padding: 20px; */
}

.filter-container {
    margin-bottom: 20px;
}

.topic-filter {
    padding: 10px;
    font-size: 16px;
}

.conference-document {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
}

.conference-document h3 {
    margin-top: 0;
}
#seminar-list-link{
	border-radius: 16px;
}
/*X-Small devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  
	.pre-footer .col-inner{
        display: flex;
        justify-content: flex-end;
    }
	.small-order-ltr{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	.small-order-1{
		order: 0;
		-webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -moz-order: 0;
	}
	.small-order-2{
		order: 0;
		-webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -moz-order: 0;
	}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {  
	

}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  
	.text-box-hide-for-small {
		bottom: 20% !important;
	}
}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {  
	.text-box-hide-for-small {
		bottom: 22% !important;
	}
	.nav-column>li>a,
	.nav-dropdown>li>a,
	.nav-vertical-fly-out>li>a,
	.nav>li>a,
	.header-button-1 a{
		font-size: 16px !important;
		
/* 		color: var(--primary-color); */
	}
}