@charset "utf-8";
/* CSS Document */
/*------------------------------
	       common
--------------------------------*/
input[type="submit"] {
  -webkit-appearance: none;
}
input[type="button"] {
  -webkit-appearance: none;
}

html, body {
	width: 100%;
	height: 100%;
  min-height: 100%;
	font-size: 62.5%;
	line-height: 1.6;
}
body {
	font-size: 1.5rem;
}
a {
	text-decoration: none;
	color: #000;
}
a:hover {
	color: #000;
}

ul li {
	-webkit-transition: all .5s;
	transition: all .5s;
}
ul.float li:hover {
	-webkit-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
	font-weight: bold;
}
img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.labelMRed{
    font-size: 1.2rem;
    color:red !important;
}

.labelL{
    font-size: 1.5rem !important;
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.fadein{
	transform: translate(0,200px); 
	-webkit-transform: translate(0,200px); 
}
.fadeinMv{
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	transition : all 1600ms;
}
.inlineBlock {
    display: inline-block;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.floatL {
    float: left;
}
.floatR {
    float: right;
}
.clearL {
clear: left;
}
.clearR {
clear: right;
}
.txtC {
    text-align: center;
	line-height: 3.0rem;
}
.txtL {
    text-align: left;
}
.txtR {
    text-align: right;
}
.txtBold {
    font-weight: bold;
}
.fontRed {
    color: crimson;
}
.fontRedBold {
    color: crimson;
	font-weight: bold;
}
.font14 {
    font-size: 1.4rem;
}
.font16 {
    font-size: 1.6rem;
	line-height: 2.5rem;
}
.font18 {
    font-size: 1.8rem;
}
.font20 {
    font-size: 2.0rem;
	line-height: 3.0rem;
}
.font22 {
    font-size: 2.2rem;
}
.font24 {
    font-size: 2.4rem;
}
.font26 {
    font-size: 2.6rem;
}
.font28 {
    font-size: 2.8rem;
}
.fontBold {
    font-weight: bold;
}
.fontNormal {
    font-weight: normal
}
.mg5 {
    margin: 5px;
}
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}
.mg30 {
    margin: 30px;
}
.mg40 {
    margin: 40px;
}
.mg50 {
    margin: 50px;
}
.mg60 {
    margin: 60px;
}
.mg80 {
    margin: 80px;
}
.mg100 {
    margin: 100px;
}
.mgT5 {
    margin-top: 5px;
}
.mgT10 {
    margin-top: 10px;
}
.mgT20 {
    margin-top: 20px;
}
.mgT30 {
    margin-top: 30px;
}
.mgT40 {
    margin-top: 40px;
}
.mgT50 {
    margin-top: 50px;
}
.mgT60 {
    margin-top: 60px;
}
.mgT80 {
    margin-top: 80px;
}
.mgT100 {
    margin-top: 100px;
}
.mgR5 {
    margin-rignt: 5px;
}
.mgR10 {
    margin-rignt: 10px;
}
.mgR20 {
    margin-rignt: 20px;
}
.mgR30 {
    margin-rignt: 30px;
}
.mgR40 {
    margin-rignt: 40px;
}
.mgR50 {
    margin-rignt: 50px;
}
.mgR60 {
    margin-rignt: 60px;
}
.mgR80 {
    margin-rignt: 80px;
}
.mgR100 {
    margin-rignt: 100px;
}
.mgB5 {
    margin-bottom: 5px;
}
.mgB10 {
    margin-bottom: 10px;
}
.mgB20 {
    margin-bottom: 20px;
}
.mgB30 {
    margin-bottom: 30px;
}
.mgB40 {
    margin-bottom: 40px;
}
.mgB50 {
    margin-bottom: 50px;
}
.mgB60 {
    margin-bottom: 60px;
}
.mgB80 {
    margin-bottom: 80px;
}
.mgB100 {
    margin-bottom: 100px;
}
.mgL5 {
    margin-left: 5px;
}
.mgL10 {
    margin-left: 10px;
}
.mgL20 {
    margin-left: 20px;
}
.mgL30 {
    margin-left: 30px;
}
.mgL40 {
    margin-left: 40px;
}
.mgL50 {
    margin-left: 50px;
}
.mgL60 {
    margin-left: 60px;
}
.mgL80 {
    margin-left: 80px;
}
.mgL100 {
    margin-left: 100px;
}
.mgLR {
    margin-left: auto;
	margin-right: auto;
}
.pad5 {
    padding: 5px;
}
.pad10 {
    padding: 10px;
}
.pad20 {
    padding: 20px;
}
.pad30 {
    padding: 30px;
}
.pad40 {
    padding: 40px;
}
.pad50 {
    padding: 50px;
}
.pad60 {
    padding: 60px;
}
.pad80 {
    padding: 80px;
}
.pad100 {
    padding: 100px;
}
.padT5 {
    padding-top: 5px;
}
.padT10 {
    padding-top: 10px;
}
.padT20 {
    padding-top: 20px;
}
.padT30 {
    padding-top: 30px;
}
.padT40 {
    padding-top: 40px;
}
.padT50 {
    padding-top: 50px;
}
.padT60 {
    padding-top: 60px;
}
.padT80 {
    padding-top: 80px;
}
.padT100 {
    padding-top: 100px;
}
.padR5 {
    padding-rignt: 5px;
}
.padR10 {
    padding-rignt: 10px;
}
.padR20 {
    padding-rignt: 20px;
}
.padR30 {
    padding-rignt: 30px;
}
.padR40 {
    padding-rignt: 40px;
}
.padR50 {
    padding-rignt: 50px;
}
.padR60 {
    padding-rignt: 60px;
}
.padR80 {
    padding-rignt: 80px;
}
.padR100 {
    padding-rignt: 100px;
}
.padB5 {
    padding-bottom: 5px;
}
.padB10 {
    padding-bottom: 10px;
}
.padB20 {
    padding-bottom: 20px;
}
.padB30 {
    padding-bottom: 30px;
}
.padB40 {
    padding-bottom: 40px;
}
.padB50 {
    padding-bottom: 50px;
}
.padB60 {
    padding-bottom: 60px;
}
.padB80 {
    padding-bottom: 80px;
}
.padB100 {
    padding-bottom: 100px;
}
.padB200 {
    padding-bottom: 200px;
}
.padL5 {
    padding-left: 5px;
}
.padL10 {
    padding-left: 10px;
}
.padL20 {
    padding-left: 20px;
}
.padL30 {
    padding-left: 30px;
}
.padL40 {
    padding-left: 40px;
}
.padL50 {
    padding-left: 50px;
}
.padL60 {
    padding-left: 60px;
}
.padL80 {
    padding-left: 80px;
}
.padL100 {
    padding-left: 100px;
}
.underLine {
    text-decoration: underline;
}


/*||||||　@media 767px以内　||||||*/
@media screen and (max-width: 767px) { 
	.PC_ONLY{
	  display:none;
	}
	.SP_ONLY{
	  display:block;
	}

	.mgT20 {
	    margin-top: 10px !important;
	}
} /*/max-width: 767px*/


/*||||||　@media 768px以上　||||||*/
@media screen and (min-width:768px) {
	.PC_ONLY{
	  display:block;
	}
	.SP_ONLY{
	  display:none;
	}
} /*/min-width 768px*/
/*||||||　Loading animation　||||||*/
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    font-family: sans-serif;
}

.spinner {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border-top: 5px solid #555;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ADD 2025/11/19 - DucVu TOMOSIA - End - issue 396 */
.btn_blackS:hover {
    background-color: white;
    color: black;
}
/* ADD 2025/11/19 - DucVu TOMOSIA - End - issue 396 */

/* ADD 2025/10/24 - DucVu TOMOSIA - Start - issue 310 */
.animation-scale {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation-scale:hover {
    transform: scale(1.05);
}

.animation-opacity {
    transition: opacity 0.3s ease;
}

.animation-opacity:hover {
    opacity: 0.5 !important;
}

.animation-fontweight-bold {
    transition: font-weight 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation-fontweight-bold:hover {
    font-weight: 900;
}

.animation-blackbtn-hover {
    transition: background-color 0.8s ease, color 0.8s ease !important;
}

.animation-blackbtn-hover:hover {
    background-color: white !important;
    color: black !important;
    border: 2px solid black;
    box-sizing: border-box;
}

#chatIconMgpt {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#chatIconMgpt:hover {
    transform: scale(1.1);
}
/* ADD 2025/10/24 - DucVu TOMOSIA - End - issue 310 */
/* ADD 2025/11/21 TrungPhan-TOMOSIA - Start - issue 394 */
#base-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    font-family: sans-serif;
}
/* ADD 2025/11/21 TrungPhan-TOMOSIA - End - issue 394 */

.loading-block {
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 99;
    background-color: #6b6b6b98;
}
/* ADD 2025/11/18 - TrungPhan TOMOSIA - Issue 391 - Start */
#chatmgpt-bubble-button.move-left {
    transform: translateX(-70px);
}
#chatmgpt-bubble-button {
    transition: all 0.4s ease;
}
/* ADD 2025/11/18 - TrungPhan TOMOSIA - Issue 391 - End */

.btn-dark {
    background-color: black !important;
    color: white !important;
}

.btn-close-modal {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 24px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.btn-footer {
    max-width: 200px;
}

.group-btn-footer {
    display: flex;
    justify-content: center !important;
}

.filter-field {
    padding: 0 0 20px 10px !important;
}

.group-paging {
    margin-top: 10px !important;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .group-paging {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 480px) {
    .pagination-wrapper {
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {
    .filter-field {
        padding: 0 0 10px 10px !important;
    }
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}