*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
* {
	transition: all 0.5s ease;
}
:root {
    --ratio: 1;
}
/* Desktop medium - 1440px */
@media only screen and (max-width: 1680px) {
	:root {
		--ratio: calc(1680 / 1920);
	}
	.container {
		width: 1440px;
	}
}
/* Desktop small - 1360px */
@media only screen and (max-width: 1440px) {
	:root {
		--ratio: calc(1440 / 1920);
	}
	.container {
		width: 1280px;
	}
}
/* Desktop small - 1280px */
/* @media only screen and (max-width: 1360px) {
      .container {
          width: 1280px;
      }
  } */
/* Tablet large - 1140px */
@media only screen and (max-width: 1280px) {
	:root {
		--ratio: calc(1280 / 1920);
	}
	.container {
		width: 1140px;
	}
}
/* Tablet large - 960px */
@media only screen and (max-width: 1140px) {
	:root {
		--ratio: calc(1140 / 1920);
	}
	.container {
		width: 960px;
	}
}
/* Tablet small - 768px */
@media only screen and (max-width: 1024px) {
	:root {
		--ratio: calc(1024 / 1920);
	}
	.container {
		width: 100%;
	}
}
/* Mobile - 640px */
@media only screen and (max-width: 768px) {
	:root {
		--ratio: 0.5;
		/* Tỷ lệ cho mà n hình nhỏ */
	}
}