/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Spartan:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Kablammo:MORF@7&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oi&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Potta+One&family=Raleway:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Kablammo:MORF@7&family=Lexend:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oi&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Potta+One&family=Raleway:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 4rem;

  /*========== Colors ==========*/
  --first-color: 	hsl(0, 75%, 33%);
  --first-color-alt: hsl(129, 44%, 94%);
  --second-color: hsl(45, 65%, 90%);
  --title-color: hsl(115, 67%, 13%);
  --text-color: hsl(154, 13%, 32%);
  --text-color-light: hsl(60, 1%, 56%);
  --body-color: hsl(0, 0%, 100%);
  --container-color: hsl(0, 0%, 93%);
  --border-color: hsl(129, 36%, 85%);
  --border-color-alt: hsl(113, 15%, 90%);
  --btn-color: 	hsl(46, 75%, 81%);


  /*========== Font and typography ==========*/
  /* Font chính */
  --body-font: "Lexend", sans-serif;
  /* Font phụ */
  --second-font: "Raleway" ,sans-serif; 
  --big-font-size: 3.5rem;
  --h1-font-size: 2.75rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.75rem;
  --h4-font-size: 1.375rem;
  --large-font-size: 1.125rem;
  --normal-font-size: 1rem;
  --small-font-size: 0.875rem;
  --smaller-font-size: 0.75rem;
  --tiny-font-size: 0.6875rem;

  /*========== Font weight ==========*/
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;

  /*========== Transition ==========*/
  --transition: cubic-bezier(0, 0, 0.05, 1);
}

/* Responsive typography */
@media screen and (max-width: 1200px) {
  :root {
    --big-font-size: 2.25rem;
    --h1-font-size: 2rem;
    --h2-font-size: 1.375rem;
    --h3-font-size: 1.25rem;
    --h4-font-size: 1.125rem;
    --large-font-size: 1rem;
    --normal-font-size: 0.9375rem;
    --small-font-size: 0.8125rem;
    --smaller-font-size: 0.6875rem;
    --tiny-font-size: 0.625rem;
  }
}

/*=============== BASE ===============*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

input,
textarea,
body {
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  font-weight: var(--weight-400);
}

body {
  background-color: var(--body-color);
}

h1,
h2,
h3,
h4 {
  font-family: var(--second-font);
  color: var(--title-color);
  font-weight: var(--weight-600);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

p {
  line-height: 1.5rem;
}

img {
  max-width: 100%;
}

button,
textarea,
input {
  background-color: transparent;
  border: none;
  outline: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 0.75rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 2rem;
}

.section--lg {
  padding-block: 4rem;
}

.section__title {
  font-size: var(--h4-font-size);
  margin-bottom: 1.5rem;
}

.section__title span {
  color: var(--first-color);
}

.form__input {
  border: 1px solid var(--border-color-alt);
  padding-inline: 1rem;
  height: 45px;
  font-size: var(--small-font-size);
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
}

.new__price {
  color: var(--first-color);
  font-weight: var(--weight-600);
}

.old__price {
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  text-decoration: line-through;
}

.form {
  row-gap: 1rem;
}

.form__group {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.textarea {
  height: 200px;
  padding-block: 1rem;
  resize: none;
}

/*=============== HEADER & NAV ===============*/
.header__top {
  background-color: var(--first-color);
  border-bottom: 1px solid var(--first-color);
  padding-block: 0.875rem;
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__contact span:first-child {
  margin-right: 2rem;
  color: #fefefe;
}

.header__contact span,
.header__alert-news,
.header__alert-top-action {
  font-size: var(--small-font-size);
}

.header__alert-news {
  color: #fefefe;
  font-weight: var(--weight-600);
}

.header__top-action {
  color: #fefefe;
}

.nav,
.nav__menu,
.nav__list,
.header__user-actions {
  display: flex;
  align-items: center;
}

.nav {
  height: calc(var(--header-height) + 2.5rem);
  justify-content: space-between;
  column-gap: 1rem;
}

.nav__logo-img {
  width: 120px;
}

.nav__menu {
  flex-grow: 1;
  margin-left: 2.5rem;
}

.nav__list {
  column-gap: 2.5rem;
  margin-right: auto;
}

.nav__link {
  color: var(--title-color);
  font-weight: var(--weight-700);
  transform: all 0.3s var(--transition);
  -webkit-transform: all 0.3s var(--transition);
  -moz-transform: all 0.3s var(--transition);
  -ms-transform: all 0.3s var(--transition);
  -o-transform: all 0.3s var(--transition);
}

.header__search {
  width: 340px;
  position: relative;
}

.header__search .form__input {
  width: 100%;
}

.search__btn {
  position: absolute;
  top: 24%;
  right: 1.25rem;
  cursor: pointer;
}

.header__user-actions {
  column-gap: 1.25rem;
}

.header__action-btn {
  position: relative;
}

.header__action-btn img {
  width: 24px;
}

.header__action-btn span.count {
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  background-color: var(--first-color);
  color: var(--body-color);
  height: 18px;
  width: 18px;
  text-align: center;
  font-size: var(--tiny-font-size);
  line-height: 18px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.nav__menu-top,
.nav__toggle {
  display: none;
}

/* Active link */
.active-link,
.nav__link:hover {
  color: var(--first-color);
}


/*=============== BUTTONS ===============*/
.btn {
  display: inline-block;
  background-color: var(--first-color);
  border: 2px solid var(--first-color);
  color: var(--body-color);
  padding-inline: 1.75rem;
  /* padding: 0.75rem 1.75rem; */
  height: 49px;
  line-height: 43px;
  font-family: var(--second-font);
  font-size: var(--small-font-size);
  font-weight: var(--weight-700);
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  transition: all 0.4s var(--transition);
  -webkit-transition: all 0.4s var(--transition);
  -moz-transition: all 0.4s var(--transition);
  -ms-transition: all 0.4s var(--transition);
  -o-transition: all 0.4s var(--transition);
}

.btn:hover {
  background-color: transparent;
  color: var(--first-color);
}

.btn--md,
.btn--sm {
  font-family: var(--body-font);
}

.btn--md {
  height: 45px;
  line-height: 40px;
}

.btn--sm {
  height: 40px;
  line-height: 35px;
}

/*=============== CATEGORIES ===============*/

.flex {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

/* Css nghi làm ở đây */
/* Bài viết */
.blog_section {
  display: flex;
  justify-content: center; /* Căn giữa theo chiều ngang */
  align-items: center; /* Căn giữa theo chiều dọc */
  height: 100vh; /* Chiều cao toàn bộ màn hình */
  background-color: #f8f8f8; /* Màu nền */
}

.blog_container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Căn giữa theo chiều dọc */
  align-items: center; /* Căn giữa theo chiều ngang */
  width: auto;
  max-width: 800px; /* Chiều rộng tối đa */
  background-color: white; /* Màu nền của container */
  padding: 20px; /* Padding bên trong */
  border-radius: 8px; /* Bo góc */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Bóng đổ */
}

.hinh_blog_1 img {
  max-width: 100%; /* Đảm bảo ảnh không vượt quá chiều rộng của container */
  height: auto; /* Giữ tỷ lệ khung hình của ảnh */
}

.blog-title h1 {
  text-align: center; /* Căn giữa tiêu đề */
  margin: 20px 0; /* Khoảng cách trên và dưới */
}

.blog-content {
  text-align: justify; /* Căn đều hai bên cho nội dung */
}
/*n/ Bài viết */

/* Bình luận khách hàng */
.comments-section {
  margin-top: 40px; /* Khoảng cách trên với nội dung chính */
  padding: 0 350px; /* Khoảng cách bên trong */
  border-radius: 8px; /* Bo góc */
  margin-bottom: 30px; /* Khoảng cách dưới */
  display: flex;
  flex-direction: column; /* Sắp xếp theo chiều dọc */
  
}
.comments-section h2 {
  margin-bottom: 20px;
}
.comment_1, .comment_2, .comment_3, .comment_4, .comment_5 {
  margin-bottom: 20px; /* Khoảng cách giữa các bình luận */
  padding: 10px; /* Padding bên trong từng bình luận */
  background-color: white; /* Màu nền trắng cho từng bình luận */
  border-radius: 5px; /* Bo góc cho từng bình luận */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Bóng đổ cho từng bình luận */
}

.comment_1 p, .comment_2 p, .comment_3 p, .comment_4 p, .comment_5 p {
  margin: 0; /* Xóa margin mặc định */
}

.reply {
  display: inline-block; /* Bảo đảm nút trả lời có thể được căn giữa */
  margin-top: 10px; /* Khoảng cách trên cho nút trả lời */
  color: #007BFF; /* Màu chữ cho nút trả lời */
  text-decoration: none; /* Bỏ gạch chân */
}

.reply:hover {
  text-decoration: underline; /* Gạch chân khi hover */
}
/*n/ Bình luận khách hàng */

/* Điền bình luận */
.comment-form {
    margin-top: 60px; /* Khoảng cách với phần bình luận */
    padding: 0 350px; /* Khoảng cách bên trong */
    background-color: #e0f7fa; /* Màu nền cho form */
    border: 1px solid #ddd; /* Đường viền cho form */
    border-radius: 8px; /* Bo góc cho form */
    display: flex; /* Sử dụng flexbox */
    flex-direction: column; /* Đặt chiều dọc cho các phần tử */
    
}
.comment-form h2 {
    font-size: 24px; /* Kích thước chữ cho tiêu đề form */
    margin-bottom: 15px; /* Khoảng cách dưới tiêu đề */
    margin-top: 60px; /* Khoảng cách với phần bình luận */
}
form {
  margin-bottom: 60px;
}
.form-row {
    display: flex; /* Sử dụng flexbox cho dòng */
    gap: 20px; /* Khoảng cách giữa các trường nhập */
    margin-bottom: 15px; /* Khoảng cách dưới mỗi dòng */
}

.comment-form label {
    display: block; /* Đảm bảo mỗi label trên một dòng */
    flex: 1; /* Chiều rộng đều cho label */
}

.comment-form input, .comment-form textarea {
    flex: 2; /* Chiều rộng gấp đôi cho trường nhập */
    padding: 10px; /* Khoảng cách bên trong */
    border: 1px solid #ccc; /* Đường viền cho input */
    border-radius: 5px; /* Bo góc cho input */
}

.comment-form button {
    background-color: #007BFF; /* Màu nền cho nút */
    color: white; /* Màu chữ cho nút */
    padding: 10px 15px; /* Khoảng cách bên trong nút */
    border: none; /* Không có đường viền */
    border-radius: 5px; /* Bo góc cho nút */
    cursor: pointer; /* Hiển thị con trỏ khi hover */
}
/*n/ Điền bình luận */

/* Responsive layout cho màn hình nhỏ hơn 738px */
@media (max-width: 738px) {
  .blog_section {
      height: auto; /* Để chiều cao tự động */
      padding: 20px; /* Thêm padding cho section */
  }

  .blog_container {
      padding: 15px; /* Giảm padding bên trong */
      max-width: 90%; /* Chiều rộng tối đa là 90% */
  }

  .blog-title h1 {
      font-size: 1.5em; /* Giảm kích thước font cho tiêu đề */
  }

  .blog-content {
      font-size: 0.95em; /* Giảm kích thước font cho nội dung */
  }
  .comments-section {
    padding: 0 20px; /* Giảm padding bên trong */
}

.comment_1, .comment_2, .comment_3, .comment_4, .comment_5 {
    padding: 15px; /* Giảm padding bên trong từng bình luận */
    max-width: 100%; /* Chiều rộng tối đa là 100% */
}

.comments-section h2 {
    font-size: 1.5em; /* Giảm kích thước font cho tiêu đề */
}

.reply {
    font-size: 0.9em; /* Giảm kích thước font cho nút trả lời */
}
.comment-form {
  padding: 0 20px; /* Giảm padding bên trong */
}

.form-row {
  flex-direction: column; /* Đặt các trường nhập theo chiều dọc */
  gap: 10px; /* Giảm khoảng cách giữa các trường nhập */
}

.comment-form h2 {
  font-size: 1.5em; /* Giảm kích thước font cho tiêu đề */
}

.comment-form input, .comment-form textarea {
  flex: none; /* Đặt chiều rộng tự động cho input và textarea */
  width: 100%; /* Chiều rộng 100% cho các trường nhập */
}

.comment-form button {
  width: 100%; /* Chiều rộng 100% cho nút */
}
}
  



/*=============== FOOTER ===============*/
.footer__container {
  grid-template-columns: 4.5fr repeat(2, 2fr) 3.5fr;
  padding-block: 2.5rem;
}

.footer__logo-img {
  width: 120px;
}

.footer__subtitle {
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  margin-block: 1.25rem 0.625rem;
}

.footer__description {
  margin-bottom: 0.25rem;
}

.footer__description span {
  font-weight: var(--weight-600);
}

.footer__social .footer__subtitle {
  margin-top: 1.875rem;
}

.footer__social-links {
  column-gap: 0.25rem;
}

.footer__social-icon {
  width: 20px;
  opacity: 0.7;
}

.footer__title {
  font-size: var(--large-font-size);
  margin-block: 1rem 1.25rem;
}

.footer__link {
  color: var(--title-color);
  font-size: var(--small-font-size);
  margin-bottom: 1rem;
  display: block;
  transition: all 0.3s var(--transition);
  -webkit-transition: all 0.3s var(--transition);
  -moz-transition: all 0.3s var(--transition);
  -ms-transition: all 0.3s var(--transition);
  -o-transition: all 0.3s var(--transition);
}

.footer__link:hover {
  color: var(--first-color);
  margin-left: 0.25rem;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid var(--border-color-alt);
}

.copyright,
.designer {
  color: var(--text-color-light);
  font-size: var(--small-font-size);
}

/*=============== BREADCRUMBS ===============*/
.breadcrumb {
  background-color: var(--container-color);
  padding-block: 1.5rem;
}

.breadcrumb__list {
  column-gap: 0.75rem;
}

.breadcrumb__link {
  color: var(--text-color);
  font-size: var(--small-font-size);
}

/*=============== CART ===============*/

.table__title,


.table__trash,
.table__stock {
  font-size: var(--small-font-size);
}
.table__title,
.table__stock {
  color: var(--first-color);
}