/* style.css - Tat ca kieu dang (style) cua trang chu Firewing
Muc luc:
0. Mau sac, font chu, quy tac chung
1. Thanh thong bao
2. Header (logo, menu, nut)
3. Hero (phan dau trang)
4. Dai tinh nang (01 02 03)
5. Thuc don (THE GOOD STUFF)
6. Banner khuyen mai (DOUBLE UP)
7. Dai cam ket (banner) (GOOD FOOD. GOOD MOOD.)
8. Footer
9. Thong bao nho (toast)
10. Tui hang (bang ben phai)
11. Tai khoan (nut tren header + hop dang nhap / dang ky)
12. Trang quan ly thanh vien (admin.html)
13. Man hinh nho (tablet, dien thoai) */


/* 0. MAU SAC, FONT, QUY TAC CHUNG */

/* Tai 2 font chu tu Google Fonts:
"Anton"   = chu cao, dam, dung cho tieu de lon
"DM Sans" = chu thuong, dung cho noi dung */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;700;800&display=swap");

/* Bien CSS: dat ten cho mau mot lan o day, sau do dung bang var(--ten).
Doi mau o day = doi mau tren ca trang. */
:root {
  --mau-kem: #f7f0df;      /* nen trang */
  --mau-do: #d72c21;       /* mau chinh (nut bam) */
  --mau-do-dam: #b51f17;   /* mau nut khi re chuot vao */
  --mau-vang: #f5b823;     /* mau nhan */
  --mau-nau: #251c18;      /* thanh toi va footer */
  --mau-chu: #211b18;      /* mau chu chinh */
  --mau-chu-nhat: #766a62; /* mau chu phu (xam nau) */
  --mau-vien: #ddd3c0;     /* duong ke mong */
}

/* Chieu rong/cao TINH CA padding va border.
Neu khong co dong nay: hop 100px + padding 10px se thanh 120px. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--mau-kem);
  color: var(--mau-chu);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Khung chua noi dung: o giua trang, rong toi da 1240px */
.container {
  max-width: 1240px;
  margin: 0 auto;           /* auto trai + phai = can giua */
  padding-left: 20px;
  padding-right: 20px;
}

/* Clearfix: hop chi chua cac phan tu float se bi cao = 0.
Them class="clearfix" vao hop do: dong ::after nay 
tao mot dong rong vo hinh nam DUOI cac float, giup hop cao dung. */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* Chu nho mau do, in hoa, nam tren tieu de */
.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mau-do);
}

/* Font tieu de lon */
.font-display {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
}

/* Nut bam
Dung 2 class cung luc, vi du: class="btn btn-do" */
.btn {
  display: inline-block;
  height: 44px;
  line-height: 42px;        /* bang chieu cao (tru vien (outline)) = chu nam giua theo chieu doc */
  padding: 0 20px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

.btn-lon {
  height: 56px;
  line-height: 54px;
  padding: 0 24px;
}

.btn-do {
  background-color: var(--mau-do);
  color: white;
}

.btn-do:hover {
  background-color: var(--mau-do-dam);
}

.btn-vien {
  border-color: #c9c0b2;
}

.btn-vien:hover {
  background-color: white;
}

.btn-trang {
  background-color: white;
  color: var(--mau-chu);
}

.btn-trang:hover {
  background-color: var(--mau-vang);
}

.btn img {
  vertical-align: middle;
  margin: -3px 6px 0 0;     /* day icon nho len mot chut cho thang hang voi chu */
}


/* 1. THANH THONG BAO */
.thong-bao {
  background-color: var(--mau-nau);
  color: white;
  text-align: center;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.thong-bao-cham {
  color: var(--mau-vang);
  margin: 0 8px;
}


/* 2. HEADER
Cach xep (khong dung flexbox):
- logo tha noi (float) sang TRAI
- cac nut tha noi sang PHAI
- link menu nam o giua nho text-align: center */
.header {
  /* sticky = header dinh o tren cung man hinh khi cuon trang */
  position: sticky;
  top: 0;
  z-index: 40;              /* z-index cao = nam DE LEN noi dung khac */
  background-color: var(--mau-kem);
  border-bottom: 1px solid var(--mau-vien);
}

.header-thanh {
  height: 76px;
}

/* Logo (trai) */
.logo {
  float: left;
  margin-top: 16px;         /* (76px header - 44px logo) / 2 = 16px */
}

.logo-tron {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 40px;
  border-radius: 50%;       /* bo goc 50% = hinh tron */
  background-color: var(--mau-do);
  text-align: center;
  vertical-align: middle;
}

.logo-tron img {
  vertical-align: middle;
}

.logo-chu {
  margin-left: 8px;
  font-family: "Anton", Impact, sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  vertical-align: middle;
}

/* Cac nut (phai) */
.header-nut {
  float: right;
  margin-top: 16px;
}

.header-nut .btn,
.header-nut .nut-vuong {
  margin-left: 6px;
  vertical-align: middle;
}

/* Nut vuong co icon (tui hang, menu) */
.nut-vuong {
  display: inline-block;
  position: relative;       /* de so do (so mon) nam o goc nut */
  width: 44px;
  height: 44px;
  line-height: 40px;
  padding: 0;
  border: 1px solid #d6cdbd;
  background-color: #fbf8f0;
  text-align: center;
}

.nut-vuong:hover {
  background-color: white;
}

.nut-vuong img {
  vertical-align: middle;
}

/* Vong tron do hien so mon trong tui.
position: absolute = dat theo vi tri cua .nut-vuong (cha co position: relative) */
.so-mon {
  display: none;            /* JavaScript se hien no khi tui co mon */
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: var(--mau-do);
  color: white;
  font-size: 10px;
  font-weight: 700;
}

/* Nut menu (3 gach) chi hien tren man hinh nho - xem muc 11.
Viet ".header-nut .nut-menu" (2 class) de manh hon ".nut-vuong"
o tren, neu khong dong display: none se bi ghi de. */
.header-nut .nut-menu {
  display: none;
}

/* Link menu (giua) */
.menu-chinh {
  text-align: center;
  line-height: 76px;        /* bang chieu cao header = chu nam giua theo chieu doc */
  font-size: 14px;
  font-weight: 700;
}

.menu-chinh a {
  margin: 0 14px;
}

.menu-chinh img {
  vertical-align: middle;
  margin-right: 2px;
}

.menu-chinh a:hover {
  color: var(--mau-do);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px; /* gach chan nam thap xuong mot chut */
}

/* Menu tha xuong tren dien thoai: an mac dinh,
JavaScript them class "mo" de hien ra */
.menu-dien-thoai {
  display: none;
  padding: 12px 20px 20px 20px;
  border-top: 1px solid var(--mau-vien);
  font-weight: 700;
}

.menu-dien-thoai a {
  display: block;           /* moi link mot dong */
  padding: 8px 0;
}


/* 3. HERO
2 cot bang float: chu ben TRAI (45%), anh ben PHAI (55%) */
.hero {
  padding: 48px 0 96px 0;
}

.hero-chu {
  float: left;
  width: 45%;
  padding: 40px 32px 0 0;
}

.hero-tieu-de {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 128px;
  line-height: 0.85;
}

.hero-tieu-de span {
  color: var(--mau-do);
}

.hero-mo-ta {
  margin-top: 28px;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  color: #665b54;
}

.hero-cac-nut {
  margin-top: 32px;
}

.hero-cac-nut .btn {
  margin: 0 8px 10px 0;
}

/* Cot anh: position: relative de the gia ($9.99) dat duoc o goc anh */
.hero-anh {
  float: right;
  width: 55%;
  height: 560px;
  position: relative;
  overflow: hidden;
  background-color: var(--mau-nau);
}

.hero-anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* anh lap day khung ma khong bi meo */
}

/* The gia mau vang o goc duoi ben trai anh */
.the-gia {
  position: absolute;
  left: 32px;
  bottom: 32px;
  padding: 12px 20px;
  background-color: var(--mau-vang);
}

.the-gia-so {
  display: block;
  font-family: "Anton", Impact, sans-serif;
  font-size: 32px;
  line-height: 1;
}

.the-gia-chu {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}


/* 4. DAI TINH NANG
3 o nam canh nhau bang float, moi o 33.333% */
.tinh-nang {
  background-color: var(--mau-nau);
  color: white;
}

.tinh-nang-o {
  float: left;
  width: 33.333%;
  padding: 28px 24px;
  border-left: 1px solid #3d332e;
}

.tinh-nang-o-dau {
  padding-left: 0;
  border-left: 0;
}

.tinh-nang-so {
  float: left;
  font-family: "Anton", Impact, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  color: var(--mau-vang);
}

.tinh-nang-noi-dung {
  margin-left: 52px;        /* chua cho cho con so float ben trai */
}

.tinh-nang-tieu-de {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 24px;
  letter-spacing: 1px;
}

.tinh-nang-chu {
  margin-top: 2px;
  font-size: 14px;
  color: #a39a94;
}


/* 5. THUC DON */
.thuc-don {
  padding: 96px 0;
}

.thuc-don-dau {
  float: left;
}

.thuc-don-tieu-de {
  margin-top: 12px;
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 96px;
  line-height: 1;
}

/* Cac nut loc theo loai mon */
.cac-loai {
  float: right;
  margin-top: 70px;         /* day xuong cho ngang hang voi tieu de */
}

.nut-loai {
  height: 40px;
  padding: 0 16px;
  margin: 0 0 8px 6px;
  border: 1px solid #c9c0b2;
  background-color: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nut-loai:hover {
  border-color: var(--mau-chu);
}

/* Nut dang duoc chon */
.nut-loai.dang-chon {
  background-color: var(--mau-chu);
  border-color: var(--mau-chu);
  color: white;
}

/* Danh sach mon an.
Moi the mon la "inline-block": nam canh nhau nhu cac chu trong cau.
3 the x 33.333% = 1 hang.
Danh sach co margin -10px 2 ben, moi the co padding 10px 2 ben
=> giua 2 the cach nhau 20px, nhung the ngoai cung van thang mep trang. */
.danh-sach-mon {
  margin: 44px -10px 0 -10px;
}

/* Dong chu khi khong co mon nao (vi du admin da xoa het mon) */
.danh-sach-trong {
  padding: 40px 10px 80px 10px;
  text-align: center;
  color: var(--mau-chu-nhat);
}

.the-mon {
  display: inline-block;
  vertical-align: top;      /* cac the thang hang o phia tren */
  width: 33.333%;
  padding: 0 10px;
  margin-bottom: 44px;
}

/* Khung anh: position: relative de nhan (badge) va nut + dat o goc */
.the-mon-anh {
  position: relative;
  height: 260px;
  overflow: hidden;         /* an phan anh bi phong to khi re chuot */
  background-color: #e6dcc8;
}

.the-mon-anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s; /* phong to tu tu trong 0.5 giay */
}

/* Re chuot vao the => anh phong to 4% */
.the-mon:hover .the-mon-anh img {
  transform: scale(1.04);
}

/* Nhan vang (Bestseller, New...) o goc tren ben trai */
.nhan {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 12px;
  background-color: var(--mau-vang);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Nut + mau do o goc duoi ben phai */
.nut-them {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border: 0;
  background-color: var(--mau-do);
  color: white;
  font-size: 28px;
  line-height: 48px;
}

.nut-them:hover {
  background-color: var(--mau-do-dam);
}

.the-mon-thong-tin {
  padding-top: 18px;
}

.the-mon-gia {
  float: right;             /* gia nam ben phai ten mon */
  padding-top: 6px;
  font-weight: 800;
}

.the-mon-ten {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 28px;
  line-height: 1.2;
}

.the-mon-mo-ta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--mau-chu-nhat);
}


/* 6. BANNER KHUYEN MAI
Anh nam nua ben trai, chu nam nua ben phai.
Anh dung position: absolute + height: 100%
nen luon cao bang hop do. */
.khuyen-mai {
  padding-bottom: 96px;
}

.khuyen-mai-hop {
  position: relative;
  background-color: var(--mau-do);
  color: white;
}

.khuyen-mai-anh {
  position: absolute;
  top: 0;
  left: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
}

.khuyen-mai-chu {
  margin-left: 52%;         /* bat dau ngay sau anh */
  padding: 72px 64px;
}

.khuyen-mai-chu .eyebrow {
  color: var(--mau-vang);
}

.khuyen-mai-tieu-de {
  margin-top: 16px;
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 72px;
  line-height: 0.9;
}

.khuyen-mai-mo-ta {
  margin-top: 24px;
  max-width: 420px;
  color: #f6d5d2;
  line-height: 1.7;
}

.khuyen-mai-chu .btn {
  margin-top: 32px;
}


/* 7. DAI CAM KET */
.cam-ket {
  background-color: var(--mau-vang);
  padding: 64px 0;
}

.cam-ket .eyebrow {
  color: var(--mau-chu);
}

.cam-ket-tieu-de {
  margin-top: 8px;
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 72px;
  line-height: 1;
}


/* 8. FOOTER */
.footer {
  background-color: var(--mau-nau);
  color: white;
  padding: 48px 0;
}

/* 2 hop float co margin-bottom de tao khoang cach voi dong cuoi.
(margin-top cua .footer-cuoi se KHONG co tac dung,
vi "clear: both" xoa (delete) mat no.) */
.footer-thuong-hieu {
  float: left;
  margin-bottom: 40px;
}

.footer-ten {
  font-family: "Anton", Impact, sans-serif;
  font-size: 30px;
  letter-spacing: 2px;
}

.footer-khau-hieu {
  margin-top: 4px;
  font-size: 14px;
  color: #9a908a;
}

.footer-link {
  float: right;
  margin-bottom: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footer-link a {
  margin-left: 32px;
  color: #d3cdc9;
}

.footer-link a:hover {
  color: var(--mau-vang);
}

.footer-cuoi {
  clear: both;              /* bat dau BEN DUOI 2 hop float o tren */
  padding-top: 24px;
  border-top: 1px solid #3d332e;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7c736e;
}


/* 9. THONG BAO NHO (TOAST)
position: fixed = dung yen mot cho tren man hinh ke ca khi cuon.
left: 0 + right: 0 + margin: 0 auto = nam giua man hinh. */
.toast {
  display: none;            /* JavaScript them class "hien" de hien ra */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 50;
  width: 90%;
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 20px;
  border: 2px solid var(--mau-vang);  /* vien vang de van thay ro khi nam tren nen toi */
  background-color: var(--mau-nau);
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.toast.hien {
  display: block;
}


/* 10. TUI HANG
Lop phu toi + bang tui hang ben phai. Ca 2 dung position: fixed
(giong toast) nen dung yen khi cuon trang. An luc dau, JavaScript se hien ra.
z-index: lop phu 44, bang 45 => nam tren header (40), duoi toast (50). */
.lop-mo {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 44;
  background-color: rgba(0, 0, 0, 0.5);  /* mau den, trong suot 50% */
}

.tui-hang {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 45;
  width: 400px;
  max-width: 100%;          /* man hinh nho hon 400px thi bang rong bang man hinh */
  height: 100%;
  overflow-y: auto;         /* nhieu mon qua thi hien thanh cuon doc */
  background-color: var(--mau-kem);
}

.tui-hang-dau {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mau-vien);
}

.tui-hang-dong {
  float: right;
}

.tui-hang-tieu-de {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 32px;
  line-height: 44px;        /* bang chieu cao nut dong = nam ngang hang */
}

.danh-sach-tui {
  padding: 8px 20px;
}

.tui-trong {
  padding: 40px 0;
  text-align: center;
  color: var(--mau-chu-nhat);
}

/* Mot mon trong tui: anh tha noi ben trai, chu nam ben phai */
.mon-trong-tui {
  padding: 16px 0;
  border-bottom: 1px solid var(--mau-vien);
}

.mon-trong-tui img {
  float: left;
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.mon-trong-tui-chu {
  margin-left: 88px;        /* 72px anh + 16px khoang cach */
}

.mon-trong-tui-ten {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.2;
}

.mon-trong-tui-gia {
  font-size: 14px;
  font-weight: 700;
}

/* Hang chua nut - so luong + va nut Remove */
.mon-trong-tui-nut {
  margin-top: 8px;
}

/* Nut - va + nho, so luong nam giua */
.nut-so-luong {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #c9c0b2;
  background-color: white;
  font-size: 16px;
  line-height: 26px;
}

.so-luong {
  display: inline-block;
  width: 32px;
  text-align: center;
  font-weight: 700;
}

.nut-xoa {
  margin-left: 12px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--mau-do);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}

.tui-hang-cuoi {
  padding: 20px;
}

.tong-tien-chu {
  float: left;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.tong-tien {
  float: right;
  font-family: "Anton", Impact, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.nut-thanh-toan {
  display: block;
  width: 100%;
  margin-top: 16px;
}


/* 11. TAI KHOAN */

/* Nut tai khoan tren header ("Log in" hoac "Hi, ten").
Ten dai qua thi cat bot va hien dau ... o cuoi:
white-space: nowrap = khong cho chu xuong dong,
overflow: hidden = an phan chu tran ra ngoai nut,
text-overflow: ellipsis = thay phan bi an bang dau ... */
.nut-tai-khoan {
  max-width: 160px;         /* hep hon thi header tren tablet khong bi tran xuong dong */
  padding: 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hop dang nhap / dang ky: nam giua man hinh, dung yen khi cuon.
Cach can giua giong toast: left: 0 + right: 0 + margin: 0 auto.
z-index 45 giong tui hang (lop phu toi cung dung class lop-mo, z-index 44). */
.hop-tai-khoan {
  display: none;            /* JavaScript se hien ra */
  position: fixed;
  top: 5%;
  left: 0;
  right: 0;
  z-index: 45;
  width: 90%;
  max-width: 420px;
  max-height: 90%;          /* man hinh thap thi hop khong cao qua man hinh */
  overflow-y: auto;         /* ... va hien thanh cuon doc neu can */
  margin: 0 auto;
  padding: 24px 28px 28px 28px;
  border-top: 6px solid var(--mau-do);
  background-color: var(--mau-kem);
}

.hop-tai-khoan-dong {
  float: right;
}

.hop-tai-khoan-tieu-de {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 40px;
  line-height: 44px;        /* bang chieu cao nut dong = nam ngang hang */
}

.hop-tai-khoan-mo-ta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--mau-chu-nhat);
}

/* Chu nho nam tren moi o nhap (Email, Password...) */
.ten-o {
  display: block;
  margin: 18px 0 6px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* O nhap chu */
.o-nhap {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #c9c0b2;
  background-color: white;
  font-family: inherit;
  font-size: 16px;          /* 16px tro len thi dien thoai khong tu phong to trang khi bam vao o */
}

/* Khi dang go trong o: vien doi sang mau do */
.o-nhap:focus {
  outline: none;
  border-color: var(--mau-do);
}

/* Dong bao loi mau do (rong thi khong chiem cho) */
.loi {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mau-do);
}

/* Nut rong het chieu ngang hop */
.nut-day-du {
  display: block;
  width: 100%;
  margin-top: 20px;
}

/* Dong chuyen qua lai giua dang nhap va dang ky */
.hop-tai-khoan-chuyen {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--mau-chu-nhat);
}

/* Nut trong giong mot link: khong vien, khong nen, chu do gach chan */
.nut-chu {
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--mau-do);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

/* Phan thong tin khi da dang nhap */
.thong-tin-vai-tro {
  display: inline-block;
  margin: 8px 0 12px 0;
  padding: 6px 10px;
  background-color: var(--mau-vang);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.thong-tin-dong {
  font-size: 14px;
  color: var(--mau-chu-nhat);
}


/* 12. TRANG QUAN LY THANH VIEN (admin.html) */
.admin-trang {
  padding: 48px 0 96px 0;
}

.admin-tieu-de {
  margin-top: 8px;
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 72px;
  line-height: 1;
}

.admin-mo-ta {
  margin-top: 8px;
  color: var(--mau-chu-nhat);
}

/* Hop trang chua form them thanh vien */
.admin-hop {
  margin-top: 32px;
  padding: 24px 28px 28px 28px;
  border: 1px solid var(--mau-vien);
  border-top: 6px solid var(--mau-do);
  background-color: white;
}

.admin-hop-tieu-de {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 28px;
  line-height: 1.2;
}

/* Moi o trong form: 3 o x 28% + nut "Add member" nam tren 1 hang.
vertical-align: bottom = cac o va nut thang hang o phia duoi. */
.admin-o {
  display: inline-block;
  vertical-align: bottom;
  width: 28%;
  padding-right: 12px;
}

/* O chua nut: rong vua bang nut */
.admin-o-nut {
  width: auto;
  padding-right: 0;
}

/* Dong thong bao ket qua (mau chu do JavaScript dat) */
.admin-tin {
  margin-top: 16px;
  min-height: 24px;         /* luon chua cho cho 1 dong, bang khong bi nhay len xuong */
  font-weight: 700;
}

/* Khung bao quanh bang: bang rong hon man hinh thi cuon ngang */
.khung-bang {
  margin-top: 8px;
  overflow-x: auto;
}

.bang-thanh-vien {
  width: 100%;
  min-width: 900px;         /* nho hon thi cac cot bi chat, nen cho cuon ngang */
  border-collapse: collapse; /* gop vien cua cac o lien nhau thanh 1 duong */
  background-color: white;
  font-size: 14px;
}

.bang-thanh-vien th,
.bang-thanh-vien td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mau-vien);
  text-align: left;
  vertical-align: middle;
}

/* Hang tieu de cua bang: nen toi, chu trang in hoa */
.bang-thanh-vien th {
  background-color: var(--mau-nau);
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Nhan trang thai: xanh = Active, do = Locked */
.trang-thai {
  display: inline-block;
  padding: 4px 10px;
  background-color: #e3f1dc;
  color: #2c6b1f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.trang-thai-khoa {
  background-color: #fbe0dd;
  color: var(--mau-do);
}

/* O nhap mat khau moi va nut nho trong bang */
.o-nho {
  width: 130px;
  height: 32px;
  padding: 0 8px;
  margin-right: 6px;
  border: 1px solid #c9c0b2;
  font-family: inherit;
  font-size: 14px;
  vertical-align: middle;
}

.nut-nho {
  height: 32px;
  padding: 0 12px;
  margin-right: 6px;
  border: 1px solid #c9c0b2;
  background-color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
}

.nut-nho:hover {
  border-color: var(--mau-chu);
}

/* Nut Delete: chu va vien mau do */
.nut-nho-do {
  border-color: var(--mau-do);
  color: var(--mau-do);
}

.nut-nho-do:hover {
  background-color: var(--mau-do);
  border-color: var(--mau-do);
  color: white;
}

/* Chu "Main admin" thay cho nut khoa / xoa o hang cua admin */
.admin-ghi-chu {
  font-size: 12px;
  color: var(--mau-chu-nhat);
}

/* Dong "Jump to: Members · Products" duoi tieu de */
.admin-chuyen {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
}

.admin-chuyen a {
  margin: 0 4px;
  color: var(--mau-do);
  text-decoration: underline;
}

/* Moi phan (Members, Products) cach nhau mot khoang lon.
scroll-margin-top: khi bam link "Jump to" (hoac lenh scrollIntoView),
trang dung lai cach mep tren 96px, de header dinh (cao 76px)
khong che mat tieu de cua phan do. */
.admin-phan {
  margin-top: 56px;
  scroll-margin-top: 96px;
}

.admin-hop {
  scroll-margin-top: 96px;
}

.admin-phan-tieu-de {
  font-family: "Anton", Impact, sans-serif;
  font-weight: normal;
  font-size: 48px;
  line-height: 1;
}

/* O rong gap doi (link anh, mo ta) */
.admin-o-rong {
  width: 56%;
}

/* Hang chua nut "Add product" / "Save changes" va "Cancel" */
.admin-nut-hang {
  margin-top: 20px;
}

.admin-nut-hang .btn {
  margin-right: 8px;
}

/* Nut Cancel an luc dau, JavaScript hien ra khi bam "Edit".
(Dat sau .btn trong file nen display: none thang display: inline-block cua .btn) */
.nut-huy-sua {
  display: none;
}

/* O thang hang o phia TREN (thay vi phia duoi nhu .admin-o binh thuong).
Dung cho hang co o cao hon cac o khac (o Category khi hien them o loai moi,
o Preview co anh) de chu "Name", "Price"... van nam ngang nhau. */
.admin-o-tren {
  vertical-align: top;
}

/* Danh sach chon loai: con tro hinh ban tay khi re chuot vao */
select.o-nhap {
  cursor: pointer;
}

/* O go ten loai moi: nam duoi danh sach chon, an luc dau.
JavaScript hien ra khi chon "+ New category..." */
.o-loai-moi {
  display: none;
  margin-top: 8px;
}

/* O "Preview" (chu + anh): an luc dau, ham previewImage hien ra khi co link.
(Dat sau .admin-o trong file nen display: none thang inline-block cua .admin-o) */
.o-xem-truoc {
  display: none;
}

/* Anh xem truoc trong form */
.anh-xem-truoc {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border: 1px solid var(--mau-vien);
}

/* Anh nho trong bang mon an */
.anh-nho {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* Cot mo ta: hep lai, chu nhat mau hon */
.o-mo-ta {
  max-width: 260px;
  color: var(--mau-chu-nhat);
}


/* 13. MAN HINH NHO
@media chi ap dung khi dieu kien dung.
(max-width: 1023px) = "khi man hinh rong 1023px tro xuong" */

/* Tablet va dien thoai */
@media (max-width: 1023px) {

  /* An link menu, hien nut 3 gach */
  .menu-chinh {
    display: none;
  }
  .header-nut .nut-menu {
    display: inline-block;
  }
  .menu-dien-thoai.mo {
    display: block;
  }

  /* Bo float = cac cot xep chong len nhau */
  .hero-chu,
  .hero-anh,
  .thuc-don-dau,
  .cac-loai {
    float: none;
    width: 100%;
  }

  .hero-chu {
    padding-right: 0;
  }

  .hero-tieu-de {
    font-size: 104px;
  }

  .hero-anh {
    height: 420px;
    margin-top: 40px;
  }

  .cac-loai {
    margin-top: 24px;
  }

  .nut-loai {
    margin: 0 6px 8px 0;
  }

  /* 2 the mon moi hang */
  .the-mon {
    width: 50%;
  }

  /* Banner: anh tro ve vi tri binh thuong, nam tren chu */
  .khuyen-mai-anh {
    position: static;
    display: block;
    width: 100%;
    height: 300px;
  }

  .khuyen-mai-chu {
    margin-left: 0;
    padding: 48px 28px;
  }

  /* Form them thanh vien: moi o mot hang */
  .admin-o {
    width: 100%;
    padding-right: 0;
  }
  .admin-o-nut {
    margin-top: 20px;
  }
}

/* Dien thoai */
@media (max-width: 639px) {

  /* Khong du cho cho nut "Order now".
  Viet 2 class de manh hon ".btn" (cung ly do nhu nut menu) */
  .header-nut .nut-dat-hang {
    display: none;
  }

  /* Nut tai khoan (trang chu) va nut "Back to site" (trang admin):
  an chu, chi con icon, thanh nut vuong 44px giong nut tui hang.
  Icon tai khoan doi mau do khi da dang nhap. */
  .header-nut .nut-tai-khoan,
  .header-nut .nut-ve {
    width: 44px;
    padding: 0;
  }
  .nut-tai-khoan span,
  .nut-ve span {
    display: none;
  }
  .nut-tai-khoan img,
  .nut-ve img {
    margin: -3px 0 0 0;
  }

  .admin-tieu-de {
    font-size: 48px;
  }

  .admin-hop {
    padding: 20px;
  }

  .logo-chu {
    font-size: 24px;
  }

  .hero-tieu-de {
    font-size: 72px;
  }

  .hero-anh {
    height: 320px;
  }

  .tinh-nang-o {
    float: none;
    width: 100%;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #3d332e;
  }

  .tinh-nang-o-dau {
    border-top: 0;
  }

  .thuc-don-tieu-de {
    font-size: 60px;
  }

  /* 1 the mon moi hang */
  .the-mon {
    width: 100%;
  }

  .khuyen-mai-tieu-de {
    font-size: 56px;
  }

  .cam-ket-tieu-de {
    font-size: 48px;
  }

  /* Footer: xep chong thay vi trai/phai */
  .footer-thuong-hieu,
  .footer-link {
    float: none;
  }

  .footer-thuong-hieu {
    margin-bottom: 16px;
  }

  .footer-link {
    margin-bottom: 32px;
  }

  .footer-link a {
    margin-left: 0;
    margin-right: 24px;
  }
}