.cfx-mag,.bullets{
	display: inline-flex;
	width: 92px;	
	flex-flow: row nowrap;
	color: gold;
	font-size: 25px;
	letter-spacing: -.1em;
	text-indent: -.05em;
	text-shadow: 0 0 1px #000, 1px 1px 1px #000;
}
.cfx-mag {
	pointer-events: none;
	position: relative;
}
.bullets {
	top: 0; right: 0; bottom: 0; left: 0;
	position: absolute;
}

.single-stfic .book-info .cfx-mag {display: inline-flex}
.firstbook .cfx-mag, .firstbook .bullets {
	width: 110px;
	font-size: 30px;
    line-height: 1em;
}

/*Chọn sao*/
.pistol {
	display: flex;
	flex-basis: 40px;
	width: 250px;
	margin-inline: auto;
	align-items: center;
	position: relative;
}

.loadmag {
	display: flex;
	flex-flow: row nowrap;
	width: 180px;
	height: 30px;
	margin:1em auto;
	position: relative;
}
.loadmag>label {
	display: inline-flex;
	flex: 0 1 30px;
	height: 100%;
	position: relative;
}
.loadmag>input {display: none;}

.loadmag::before,.loadmag>.loadin {
	top: 0; right: 0; bottom: 0; left: 30px;
	color: gold;
	font-size: 41px;
	letter-spacing: -.1em;
	text-indent: -.05em;
	text-shadow: 1px 1px 2px #000;
	line-height: 30px;
	pointer-events: none;
	position: absolute;
}

.loadmag>#sao0 {
	background: radial-gradient(circle at center, crimson 8px, transparent 9px);
	transition: all .25s ease-in-out;
}
.loadmag>#sao0::before{
	top: 13px; right: 8px; bottom: 13px; left: 8px;
	background: #fff;
	border-radius: 9px;
	content: '';
	position: absolute;
}

.loadmag>#sao0:hover {background: radial-gradient(circle at center, orangered  8px, transparent 10px)}

.loadmag::before {content: '\2606\2606\2606\2606\2606';}
.loadmag>.loadin {mask-image: linear-gradient(to left, transparent 150px, black 150px)}
.loadmag>#sao0:hover~.loadin,.loadmag>#b0:checked~.loadin {mask-image: linear-gradient(to left, transparent 150px, black 150px)}
.loadmag>#sao1:hover~.loadin,.loadmag>#b1:checked~.loadin {mask-image: linear-gradient(to left, transparent 120px, black 120px)}
.loadmag>#sao2:hover~.loadin,.loadmag>#b2:checked~.loadin {mask-image: linear-gradient(to left, transparent 90px, black 90px)}
.loadmag>#sao3:hover~.loadin,.loadmag>#b3:checked~.loadin {mask-image: linear-gradient(to left, transparent 60px, black 60px)}
.loadmag>#sao4:hover~.loadin,.loadmag>#b4:checked~.loadin {mask-image: linear-gradient(to left, transparent 30px, black 30px)}
.loadmag>#sao5:hover~.loadin,.loadmag>#b5:checked~.loadin {mask-image:none}

.loadmag>.target {
	height: 0;
	top: 50%
}
.loadmag>.target::after {
	left: calc(100% + .5em);
	color: firebrick;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1em;
	content: '0/5';
	transition: all .35s linear;
	position: absolute;
}
.loadmag>#sao1:hover~.target::after,.loadmag>#b1:checked~.target::after {content: '1/5'}
.loadmag>#sao2:hover~.target::after,.loadmag>#b2:checked~.target::after {content: '2/5'}
.loadmag>#sao3:hover~.target::after,.loadmag>#b3:checked~.target::after {content: '3/5'}
.loadmag>#sao4:hover~.target::after,.loadmag>#b4:checked~.target::after {content: '4/5'}
.loadmag>#sao5:hover~.target::after,.loadmag>#b5:checked~.target::after {content: '5/5'}

@media only screen and (max-width: 26.25em) {
	.stfic-arcinfo>.cfx-mag {margin-left: 0;}
}