/* -----------------------------------------------------------
   REFACTOR NOTE: 
   Chuyển đổi toàn bộ ID Selector (#) sang Class Selector (.)
   ----------------------------------------------------------- */

.info-frame {
	width: calc(100% + 2px);
	position: absolute;
	z-index: 5;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	background: white;
	background-size: cover;
	padding-bottom: 10px;
	display: flex;
	flex-flow: column;
	clip-path: inset(0 0 0 0 round 0 0 15px 15px);
	margin-left: -1px;
}

/* --- QUICK CARD MODE (Type 5) --- */
.quick-card-mode {
	background: #222222 !important;
}

.quick-card-mode .top-info-img-text-div {
	color: white !important;
}
/* -------------------------------- */
.info-frame-background {
	width: calc(100% + 2px);
	aspect-ratio: 3/4;
	position: absolute;
	top: 0;
	left: -1px;
	overflow: hidden;
	z-index: 0;
}

.info-frame-expand {
	aspect-ratio: 0.78 !important;
}

.rorate180 {
	transform: rotate(3.142rad);
}

.info {
	position: relative;
	overflow-y: auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	overflow-y: auto;
	flex: 1;
}

/* MOBILE */
@media only screen and (max-device-width: 1023px) {
	.top-info-edit-threedot img {
		width: 15px;
		height: 20px;
	}
	.top-info-edit-threedot {
		width: 10px;
		height: 20px;
		position: absolute;
		right: 15px;
		top: 10px;
		cursor: pointer;
		z-index: 10;
	}
}

/* PC */
@media only screen and (min-device-width: 1023px) {
	.top-info-edit-threedot img {
		width: 10px;
		height: 20px;
	}
	.top-info-edit-threedot {
		width: 10px;
		height: 20px;
		position: absolute;
		right: 5px;
		top: 10px;
		cursor: pointer;
		z-index: 10;
	}
}

.info-toggle {
	height: 12.5px;
	width: 100%;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	padding-top: 5px;
	text-align: center;
	vertical-align: middle;
	display: flex;
	z-index: 1;
}

.info-toggle .left, .right {
	flex: 1;
}

.top-info {
	width: 100%;
	table-layout: fixed;
}

[id^="top-info-name-"] {
	font-weight: bold;
}

.top-info-img {
	width: 40%;
}

.top-info-img-inside {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-info-img img {
	width: auto;
	height: 50px;
	object-fit: cover;
	max-width: 100%;
}

.top-info-img-text {
	display: block;
	margin-left: 10px;
}

.top-info-img-text-div {
	height: 1.4em;
}

.top-info-custom-scroll {
	overflow-x: auto;
	white-space: nowrap;
	cursor: grab;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

.fade-visible {
	opacity: 1;
	visibility: visible;
}

.fade-hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

.fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.top-info-custom-scroll:active {
	cursor: grabbing;
}

.top-info-custom-scroll::-webkit-scrollbar {
	display: none;
}

.scroll-container {
	position: relative;
	overflow: hidden;
}

.scroll-content {
	white-space: nowrap;
	cursor: grab;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}
/* PC */
@media only screen and (min-device-width: 1023px) {
	.scroll-content {
		overflow-x: hidden;
	}
}
/* MOBILE */
@media only screen and (max-device-width: 1023px) {
	.scroll-content {
		overflow-x: auto;
	}
}

.scroll-content:active {
	cursor: grabbing;
}

.custom-scrollbar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	background: rgba(0, 0, 0, 0.1);
}

.custom-thumb {
	height: 100%;
	background: #d9d9d9;
	border-radius: 3px;
	position: absolute;
	left: 0;
}

.top-info-img-round-logo {
	clip-path: circle();
	aspect-ratio: 1;
}

.body-basic-info {
	border-spacing: 0px 5px;
	table-layout: fixed;
}

.cell_spacing {
	width: 15px;
}

.body-basic-info img {
	object-fit: contain;
	height: 15px;
	width: 20px;
}

.cell-body-info-icon {
	width: 20px;
	text-align: center;
	vertical-align: text-bottom;
}

.cell-body-info-text {
	word-break: break-word;
}

.enter-newline {
	white-space: pre-line;
}

.table-sns {
	border-spacing: 0 10px;
	border-collapse: separate;
}

.row-body-info-sns-logo {
	overflow: hidden;
}

.cell-body-info-sns-logo {
	text-align: left;
	vertical-align: middle;
	border: 1px solid #D1D1D1;
	border-top-left-radius: 35px;
	border-bottom-left-radius: 35px;
	border-right-width: 0px;
}

/* MOBILE */
@media only screen and (max-device-width: 1023px) {
	.cell-body-info-sns-logo {
		width: 14.5%;
	}
	.body-info-sns-logo {
		height: 34px;
		width: 34px;
	}
	.row-body-info-sns-logo {
		height: 50px;
	}
}
/* PC */
@media only screen and (min-device-width: 1023px) {
	.cell-body-info-sns-logo {
		width: 15%;
	}
	.body-info-sns-logo {
		height: 25px;
		width: 25px;
	}
	.row-body-info-sns-logo {
		height: 40px;
	}
}

.body-info-sns-href {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.cell-body-info-sns-text {
	text-align: center;
	vertical-align: middle;
	border: 1px solid #D1D1D1;
	border-top-right-radius: 35px;
	border-bottom-right-radius: 35px;
	border-left-width: 0px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-right: 7px;
}

.body-info-sns-logo {
	border-radius: 50px;
	object-fit: cover;
	margin-left: 7px;
}

.info-toggle-img {
	max-height: 100%;
	object-fit: contain;
}

.info-toggle-verify-check {
	margin-right: 10px;
}

.info-toggle-verify-check img {
	height: 100%;
	float: right;
}

.hidden-arrow {
	visibility: hidden;
}