:root {
	--color-primary: #1f55d8;
}

body {
	background: url('/images/bannerwebsite-1.jpg') no-repeat top center;
	background-size: cover;
	background-color: #181a20;
	background-attachment: fixed;
}

h1, h2, h3, h4, h5 {
	font-weight: 700;
}

.btn-custom {
	color: #fff;
	border: 1px solid var(--color-primary);
	padding: 5px 20px;
	font-size: 20px;
	border-radius: 10px;
	height: 50px;
	background: #181a20;
}

.main-title {
	color: var(--color-primary);

   letter-spacing: 5px;
   font-size: 60px;
   font-weight: bold;
/*   background-image: linear-gradient(to right, #462523 0, #5381f3 22%, #80a3f9 45%, #5e8cfd 50%, #8aacff 55%, #467af9 78%, #462523 100%);*/
   background-image: linear-gradient(to right, #ffffff 0, #ffffff 22%, #80a3f9 45%, #ffffff 50%, #8aacff 55%, #ffffff 78%, #ffffff 100%);
   
   -webkit-background-clip:text;
   -webkit-text-stroke: 3px transparent;
}
.title {
	font-size: 20px;
	background-image: linear-gradient(to right, #468aff 0, #1f55d8 22%, #80a3f9 45%, #5e8cfd 50%, #8aacff 55%, #1f55d8 78%, #462523 100%);
  color: transparent;
  -webkit-background-clip: text;
}

@media(max-width: 767px)
{
	.main-title {
		font-size: 24px;
	}
}

/*calculate-content*/
.calculate-content {
	position: relative;
	z-index: 0;
    border-radius: 30px;
	padding: 30px;
	background: #181a20de;
}
.calculate-content::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* độ dày viền */
  border-radius: inherit;
  background: linear-gradient(to left, #7da1fa, #244ebe);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.calculate-content label {
	font-size: 16px;
	margin-block: 5px;
}
.calculate-content input {
	background: unset;
	border: 1px solid var(--color-primary);
	border-radius: 10px;
	padding: 5px 10px;
	height: 50px;
}

.calculate-history table {
	color: #fff;
}
.calculate-history table th {
	background: #ffffff33;
	text-transform: uppercase;
	border: 0;
}
.calculate-history td {
	border-left: 0;
	border-right: 0;
}

@media(max-width: 767px)
{
	.calculate-content {
		padding: 20px;
	}
}
/*calculate-content*/