@import url("inputs.css");
@import url("loading.css");
@import url("spacy-button.css");
@import url("tooltip.css");
/* :root {
    --base-background: #007aff;
    --buttonBackgroundBlue: #007aff;
    --titleBlueColor: #1e6cd5;
    --white: #ffffff;
    --grayBorder: #e1e1e1;
    --backgroundA1: #F6F8FE;

    --border-color:lightblue;
} */

:root {
  /* Màu chính và màu phụ */
  --color-primary: #EFF8FF;
  --color-secondary: #E2DBBE;

  /* Màu chữ chính, chữ phụ và màu chữ khi được highlight */
  --main-text-color: #9DBBAE;
  --secondary-text-color: #9DBBAE;
  --text-highlight-color: #9DBBAE;

  /* Màu title chính và title phụ */
  --main-title-color: #D5D6AA;
  --secondary-title-color: #D5D6AA;

  /* Màu nút chính, chữ nút, và màu nút khi hover */
  --main-button-color: #87c8d4;
  --button-text-color: #ffffff;
  --button-hover-color: #5fa3aa;

  /* Màu liên kết chưa click và màu liên kết khi hover */
  --link-color: #1e73be;
  --link-hover-color: #155a8a;

  /* Màu nền chính và nền phụ */
  --main-background-color: #f8f8f8;
  --secondary-background-color: #ffffff;

  /* Màu đường viền của bảng, màu nền header của bảng, màu chữ header của bảng, 
  màu nền của hàng trong bảng, và màu nền khi hover vào hàng trong bảng */
  --table-border-color: #cccccc;
  --table-header-background: #87c8d4;
  --table-header-text-color: #ffffff;
  --table-row-background: #ffffff;
  --table-row-hover-background: #f5f5f5;

  /* Màu sắc chủ đạo và màu sắc chú ý */
  --accent-color: #87c8d4;

  /* Màu đường viền và bo góc */
  --border-color: #cccccc;
  --border-radius: 5px;
  --border-default:solid 1px var(--main-button-color);
  --border-table:solid 1px var(--main-button-color);
}



html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
}




/* Styling cho các đối tượng chung */
h1,h2,h3,h4,h5,h6,h7{
  color:var(--main-title-color)
}
/* Buttons */
button{
  background-color: var(--main-button-color);
  border: var(--border-default);
  border-radius: var(--border-radius);
}
.img-shadow-center{
  filter: drop-shadow(0 0 .1em rgb(60 60 60)) drop-shadow(0 0 0.1rem rgb(60 60 60));
}
/* Styling cho liên kết */
a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

/* Styling cho bảng */
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: var(--border-table);
  border-collapse: collapse;
  padding: 8px;
  text-align: left;
}

th {
  background-color: var(--table-header-background);
  color: var(--table-header-text-color);
}

tr {
  background-color: var(--table-row-background);
}

tr:hover {
  background-color: var(--table-row-hover-background);
}

/* Styling cho nút */
button {
  background-color: var(--main-button-color);
  color: var(--button-text-color);
  padding: 10px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: var(--button-hover-color);
}




/* Styling cho grid-container */

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:-1px;
}

.grid-container-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:-1px;

  justify-content: center;
  align-content: center;
  align-items: center;
}

.grid-container div,
.grid-container-center div,
.flex-container-center-content div {
  border: var(--border-table);
  padding: 10px;
  outline: var(--border-table);
}

.grid-container-center div,
.flex-container-center-content div {
  text-align: center;
}

/*flex*/
.flex-container,
.flex-container-nowrap,
.flex-container-center-content,
/*row*/
.flex-container-start,
.flex-container-end,
/*cols*/
.flex-container-items-center,
.flex-container-items-stretch,
.flex-container-items-baseline,
.flex-container-items-start,
.flex-container-items-end {
  display: flex;
  flex-direction: row;
}

.flex-container>div,
.flex-container-nowrap>div,
.flex-container-center-content>div,
/*row*/
.flex-container-start>div,
.flex-container-end>div,
/*cols*/
.flex-container-items-center>div,
.flex-container-items-stretch>div,
.flex-container-items-baseline>div,
.flex-container-items-start>div,
.flex-container-items-end>div,

.flex-child {
  flex: 1 1 auto;
}

.flex-container-nowrap {
  flex-wrap: nowrap;
}

/*align theo chiều ngang/row*/
.flex-container-center-content {
  justify-content: center;
  align-content: center;
  align-items: center;
}

.flex-container-start {
  justify-content: flex-start;
}

.flex-container-end {
  justify-content: flex-end;
}

/*align theo chiều dọc*/
.flex-container-items-center {
  align-items: center;
}

.flex-container-items-stretch {
  align-items: stretch;
}

.flex-container-items-baseline {
  align-items: baseline;
}

.flex-container-items-start {
  align-items: flex-start;
}

.flex-container-items-end {
  align-items: flex-end;
}